做页面一直会遇到全选和全不选的问题，在网上什么一句话实现全选全不选，也有很多用js方法实现的。
但是好像都忽略了一个问题，全选的可以控制下面的列表，但是下面的列表不能控制上面的全选，所以我就写了个例子
思路，一个全选checkALl,其他为checkItem,如果checkAll,全选和全不选下面的checkItem肯定也是全不选
但是如果checkItem为有一个没有勾选，checkAll就不应该勾选，如果checkItem全勾选上，checkAll应该要变为是勾选上的
ok，看看我实现的效果吧
把以下代码直接保存为htm文件就可以看到效果
http://www.gaodaima.com/30387.html
再看看实现过程
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> <script type="text/javascript"> $(document).ready(function () { $("#checkAll").click(function () { $(".checkItem").attr("checked", $(this)[0].checked); $(this).attr("checked") }) $(".checkItem").click(function () { var objs = $(".checkItem"); var isAllChecked = true; //是否是全x for (var i = 0; i < objs.length; i++) { if (!objs[i].checked) { isAllChecked = false; break; } } $("#checkAll").attr("checked", isAllChecked); } ); }); </script> <input type="checkbox" id="checkAll" /> 全x <div> <input type="checkbox" class="checkItem" /> 1<br /> <input type="checkbox" class="checkItem" /> 2<br /> <input type="checkbox" class="checkItem" /> 3<br /> <input type="checkbox" class="checkItem" /> 4<br /> </div> </body> </html>
有以下几点需要注意
1：为什么全选时转为$(this)[0].checked DOM元素，我在查看别人利用的$(this).attr("checked")来决定勾选是发现不选上时是无效的，因为其为未定义的
2：其实只需判断是否为全选，如果有一个没有勾上，Checkall应该是不勾上，当全部勾上时才是全勾上
欢迎大家阅读《jquery 实现智能全选_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Jquery 实现智能全选_js
转载请注明原文链接：Jquery 实现智能全选_js
