首页 > 代码库 > 实现全选和取消全选

实现全选和取消全选

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

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时,就已经是选中状态了,逻辑不要搞错了。

 

实现全选和取消全选