实现全选和取消全选
点击“全选老大”实现全选,再次点击取消全选,以此类推。
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时,就已经是选中状态了,逻辑不要搞错了。
posted on 2016-10-05 22:18 junsoo_jun 阅读(492) 评论(0) 编辑 收藏 举报