jquery 实现复选框的全选操作实例代码
@H_404_3@最近做了个需求，需要实现列表复选框的全选/取消全选操作，由于之前对这块不是很了解，所以从网上查了一些资料，虽然有各种实现方法，但没找到直接可以套用的。自己琢磨了下，把功能实现，整理如下。 @H_404_3@
实现细节如有可改进的地方，不吝赐教。 @H_404_3@
首先是html部分的代码，这里有一个表格，表格里面有一些选项： @H_404_3@
Box" name="group" value="1"/>Box" name="group" value="2"/>Box" name="group" value="3"/>
全选Box" id="all"/>
接下来是jquery： @H_404_3@
$(document).ready(function () {
//全选或全不选
$("#all").click(function () {
if (this.checked) {
$("#list :checkBox").attr("checked",true);
} else {
$("#list :checkBox").attr("checked",false);
}
});
//设置全选复选框
$("#list :checkBox").click(function () {
allchk();
});
function allchk() {
var chknum = $("#list :checkBox").size();//选项总个数
var chk = 0;
$("#list :checkBox").each(function () {
if ($(this).attr("checked")) {
chk++;
}
});
if (chknum == chk) {//全选
$("#all").attr("checked",true);
} else {//不全选
$("#all").attr("checked",false);
}
}
//显示时执行一次
allchk();
});
当全选框被点击时，判断选中状态，如果是选中，则为所有选项的复选框设置选中属性；如果是取消选中，则为所有选项的复选框取消选中属性。 @H_404_3@
同时，为每个选项复选框添加判断，当所有的选项复选框都选中时，全选框自动选中；否则，全选框取消选中。这里通过计数来比较（选项的数量和选中的选项数量），通过each方法来进行遍历。 @H_404_3@
