jquery代码实现最简单的checkbox全选功能

javascript November 07 2013


先看最初的代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><div><label><input type="checkbox"/>全部</label><label><input type="checkbox" value="0"/>电脑票</label><label><input type="checkbox" value="1"/>即开票</label><label><input type="checkbox" value="2"/>中福在线</label> </div> <script type="text/javascript">$(document).ready(function(){ var $types=$("label input:checkbox"); $types.each(function(i){ $(this).on("click",function(){ if(i==0){ $types.filter(":gt(0)").prop("checked",this.checked); }else if(!this.checked){ $types.filter(":eq(0)").prop("checked",this.checked); }else if(this.checked){ $types.filter("").prop("checked",this.checked); } }); });}); </script>

从点击事件触发方法可以看出,三种条件分支的代码大致相同,只是根据条件的不同,选择的过滤器也不同。对此可以将代码进一步简化。

$(document).ready(function(){ var $types=$("label input:checkbox"); $types.each(function(i){ $(this).on("click",function(){ $types.filter(i==0 ? ":gt(0)" : ( !this.checked ? "eq(0)" : "")).prop("checked",this.checked); }); });}); 这样就可以以一行代码替换前面的条件语句,而功能完全一样。

截图如下:

QQ截图20131107180651

原文链接:http://ichatter.cn/jquery-e4-bb-a3-e7-a0-81-e5-ae-9e-e7-8e-b0-e6-9c-80-e7-ae-80-e5-8d-95-e7-9a-84checkbox-e5-85-a8-e9-80-89-e5-8a-9f-e8-83-bd.html


欢迎来到阿J小虫的博客

Follow @ichatter on GitHub

最新评论

推荐内容