checkbox的全选与取消操作

checkbox的全选功能是非常常见，特别是在一下列表的批量操作上，或者有众多的checkbox的时候。

这里分析一下本人自己写的这部分功能。

贴代码，如下：

/**
 *checkbox全选与取消
 *
 *场景描述：有一个ktv列表，可以全选进行删除。
 *一个全选checkbox id为selectAll，列表checkbox，name为ktv_id
 */

 //解决点击全选checkbox的列表checkbox状态（全部选中或者全部不选）
$('#selectAll').click(function(){
oif($(this).is(':checked')){
o$('input[name="ktv_id[]"]').prop('checked',true);//必须用prop，不能用attr 第二次则无法显示备选状态
o}else{
o$('input[name="ktv_id"]').removeAttr('checked');
o}
})
//解决点击列表中的checkbox，全选checkbox的状态（当列表中checkbox全部选中时，全选的checkbox为选中状态，否则为不选状态）
//通对比总checkbox数量和被选选中的checkbox数量是否相等
$('input[name="ktv_id[]"]').click(function(){
o$ktvNum= $('input[name="ktv_id[]"]').length;
o$ktvSelectNum = $('input[name="ktv_id[]"]').filter(':checked').length;
oif($ktvNum == $ktvSelectNum){
o$('#selectAll').prop('checked',true);
o}else{
o$('#selectAll').removeAttr('checked',true);
o}
o
})

代码逻辑很简单，但有3个细节需要注意：

1.对checkbox属性checked的设置。这里采用的是prop而非attr,实践证明当你用attr设置的时候第一次是进行全选的时候貌似是一切正常，当你再次进行全选的时候，发现列表中的checkbox没有被勾选，不过当你debug查看元素的checkbox确实true。完美的解决方式就是用prop替代attr。

2.采用filter获取比勾选checkbox的元素集合。这里无法直接通过check属性进行选取。以为通过debug查看，你勾选下的元素是不会显示改变的checked值。

3.checked中的name一般用类似数组的形式处理（形如：name="ktv_id[]"），这样用js获取的时候或者传递到后端的时候这部分的数据是以数组的形式保存。可以取不一样的名称。当但元素很多的时候建用数组形式。

好吧，在表单元素中jq操作checkbox还是挺有意思的，总之，多实践。