juqery全选/反选demo
第一步:引用jquery文件,代码:
<script src="jquery.js" type="text/javascript"></script>
第二步:定义全选和反选的函数,代码:
<script type="text/javascript">
//全选
function checkAll(flag)
{
//得到所有check
var checkboxs = $(":checkbox");
for(var i=0;i<checkboxs.length;i++)
{
//判断名称为”checkInList”
if(checkboxs[i].name=="checkInList")
{
//判断是否全选复选框选中
if(flag)
{
checkboxs[i].checked = true;
}
else
{
checkboxs[i].checked = false;
}
}
}
}
//反选
function checkReturn()
{
//得到所有check
var checkboxs = $(":checkbox");
for(var i=0;i<checkboxs.length;i++)
{
//判断名称为”checkInList”
if(checkboxs[i].name=="checkInList")
{
if(checkboxs[i].checked)
{
checkboxs[i].checked = false;
}
else
{
checkboxs[i].checked = true;
}
}
}
}
</script>
第三步:定义一个得到选中值的函数,代码:
<script type="text/javascript">
function getCheckboxValues()
{
var temp="";
//得到页面选中的所有复选框
var checkboxs = $("input:checked");
for(var i=0;i<checkboxs.length;i++)
{
//判断名称
if(checkboxs[i].name=="checkInList")
{
//进行相应的设置(当然这里可以根据个人需要设置为xml等格式)
temp += checkboxs[i].value + ",";
}
}
alert(temp);
}
</script>
第四步:定义对应的复选框(需要name属性相同,按照上面定义的函数,需要使用name=”checkInList”),代码:
<input type="checkbox" name="checkInList" value='a' />a
<input type="checkbox" name="checkInList" value='b' />b
<input type="checkbox" name="checkInList" value='c' />c
<input type="checkbox" name="checkInList" value='d' />d
<input type="checkbox" name="checkInList" value='e' />e
<input type="checkbox" name="checkInList" value='f' />f
<input type="checkbox" name="checkInList" value='d' />d
第五步:调用对应的全选/反选函数,代码:
全选
<input type="checkbox" onclick="checkAll(this.checked)" />
反选
<input type="checkbox" onclick="checkReturn()" />
第六步:调用得到值函数得到对应的值,代码:
<input type="button" onclick="getCheckboxValues()" value="得到值"/>