实现全选和取消全选

Posted 2020-08-12

点击“全选老大”实现全选，再次点击取消全选，以此类推。

html代码是不变的：

<div id="mycheckbox">
     <input type="checkbox" id="selectAll"><br>
     <input type="checkbox"><br>
     <input type="checkbox"><br>
     <input type="checkbox"><br>
     <input type="checkbox"><br>
</div>
<div id="anotherdiv">
     <input type="checkbox">
</div>

前几天在项目中我的做法是在js中定义一个变量，每点击一次selectAll这个变量自增1，然后通过判断这个变量的奇偶性来实现全选和取消全选。这样做有两个问题：

1、使用这种变量自增1再进行判断的做法挺幼稚的，后面随着对jquery的慢慢接触可以换一种做法；

2、实现全选如果这么做$("#mycheckbox input").attr("checked",true);而且网上的回答我看到的大多都是这种做法，但是这么做会有问题，当第三次点击selectAll时全选就会失效。经过进一步的百度，要这么做：$("#mycheckbox input").prop("checked",true);这么做是没有问题的。attr最好是对自定义的属性进行操作，prop则对其自身具备的固有属性进行操作。

 

全选和取消全选取决于id为selectAll那个复选框的两个点击状态，想到可以用toggle解决，使全选和取消全选的实现代码在toggle中放两个函数切换实现，然而使用toggle后发现两个问题：绑定toggle事件的那个复选按钮在刷新页面后就一闪而过——这个问题百度了一下，据说是1.9之后删除了toggle，于是换了个1.7，果然toggle还是有用的，但是点击selectAll之后，其他的input全选倒是实现了，然而selectAll自己不是选中状态。为此做了一个测试：

$(function(){
    $("#selectAll").toggle(function(){
        $("#mycheckbox input").prop("checked",true);
        alert($(this).is(":checked"));
    },function(){
        $("#mycheckbox input").prop("checked",false);
    })
})

点击selectAll后，自身是勾选状态的： 

点击警告框的确定后，自身的勾选状态消失了：

  

百度了这个问题的答案：这是因为toggle方法中阻止了缺省动作。jquery源码中toggle在注册click时调用了event.preventDefault()，这个函数是阻止缺省动作的。然而，点击selectAll的缺省动作就是自身状态变为选中，这个动作被toggle阻止，所以最终selectAll不是勾选状态。

所以还是规规矩矩使用click实现吧

$(function(){
    $("#selectAll").bind(‘click‘,function(){
        var $allSelect = $("#mycheckbox input");
        // 如果selectAll为选中状态
        if($(this).is(":checked")){
            $allSelect.prop(‘checked‘,true);
        }
        else {
            $allSelect.prop(‘checked‘,false);
        }
    })
})

 当第一次点击selectAll时，就已经是选中状态了，逻辑不要搞错了。