JQuery实现的 checkbox 全选、反选。

发现网上写的全选的代码，不是完整的，是有bug的。全选它分几种情况

1. 全选的checkbox选中时，子checkbox全部选中。反之，全部不选

2.子checkbox中，只要有没有被选中的，取消全选checkbox的选中

3.子checkbox的数量和子checkbox被选中的数量一样时，全选checkbox要被选中

//复选框事件
//全选、取消全选的事件
function selectAll(){
if ($("#SelectAll").attr("checked")) {
$(":checkbox").attr("checked", true);
} else {
$(":checkbox").attr("checked", false);
}
}
//子复选框的事件
function setSelectAll(){
//当没有选中某个子复选框时，SelectAll取消选中
if (!$("#subcheck").checked) {
$("#SelectAll").attr("checked", false);
}
var chsub = $("input[type='checkbox'][id='subcheck']").length; //获取subcheck的个数
var checkedsub = $("input[type='checkbox'][id='subcheck']:checked").length; //获取选中的subcheck的个数
if (checkedsub == chsub) {
$("#SelectAll").attr("checked", true);
}
}

全选checkbox的id是SelectAll，子checkbox的id是subcheck。

如果页面还有别的checkbox，selectAll方法里面稍作修改。

JSP页面代码如下：

<input type="checkbox" id="SelectAll"  value="全选" onclick="selectAll();"/>

<input type="checkbox" id="subcheck"  value="1" onclick="setSelectAll();"/>
<input type="checkbox" id="subcheck"  value="2" onclick="setSelectAll();"/>
<input type="checkbox" id="subcheck"  value="3" onclick="setSelectAll();"/>
<input type="checkbox" id="subcheck"  value="4" onclick="setSelectAll();"/>

更多相关文章

随机推荐