关于checkbox的全选和反选实例

<script type="text/javascript">
$(function () {

$("#checkAll").click(function () {//点击全选
var allLength = $(":checkbox[id!='checkAll']").length; //复选框的个数
var checkLength = $(":checkbox[id!='checkAll']:checked").length; //复选框被选中的个数
if (allLength == checkLength) { //处于全选状态

$(":checkbox[id!='checkAll']").each(function () {//所有选框依次取消
$(":checkbox[id!='checkAll']").attr("checked", false);
})

}
else {//不处于全选状态

$(":checkbox[id!='checkAll']").each(function () {//所有选框依次选中
$(this).attr("checked", $("#checkAll").attr("checked"));
})
}

})
$(":checkbox[id!='checkAll']").click(function () {//点击一个普通复选框
var allLength = $(":checkbox[id!='checkAll']").length; //复选框的个数
var checkLength = $(":checkbox[id!='checkAll']:checked").length; //复选框被选中的个数
if (allLength == checkLength) { //处于全选状态

$("#checkAll").attr("checked", true);//全选按钮选中

}
else {

$("#checkAll").attr("checked", false);//全选按钮的非选中状态
}
})

})

</script>

全选<input id="checkAll" name="checkAll" type="checkbox" />
<table>
<tr> <td>
<input id="Checkbox0" name="CheckIt" type="checkbox" />
</td>
<td>选项一</td>
</tr>
<tr> <td>
<input id="Checkbox1" name="CheckIt" type="checkbox" />
</td>
<td>选项二</td>
</tr>
<tr> <td>
<input id="Checkbox2" name="CheckIt" type="checkbox" />
</td>
<td>选项三</td>
</tr>
<tr> <td>
<input id="Checkbox3" name="CheckIt" type="checkbox" />
</td>
<td>选项四</td>
</tr>
</table>

转载于:https://www.cnblogs.com/fkcxy/p/5805647.html