Jquery 全选、反选问题解析

　　最近工作中，需要使用Jquery实现复选框的全选和反选，本人虽然不是专职撸前端的，但这个小问题感觉也没什么难度，下面直接上代码：

        <div id="list">  <ul class="mui-table-view textOverflow" id="notesList" >                 <li><input type="checkbox" name="notices" value="1"> 篮球</li><li><input type="checkbox" name="notices" value="1"> 足球</li><li><input type="checkbox" name="notices" value="1"> 乒乓球</li><li><input type="checkbox" name="notices" value="1"> 羽毛球</li><li><input type="checkbox" name="notices" value="1"> 排球</li>     </ul></div><input type="button" id="all" value="全选/全不选"><input type="button" value="全选" class="btn" id="selectAll">  <input type="button" value="全不选" class="btn" id="unSelect"> 

　　Jquery的代码是这样实现的：

$("#all").click(function(){

　　if($('input[name="notices"]').prop('checked') == true){

　　　　$('input[name="notices"]').prop('checked',false);
　　}else{
　　　　　$('input[name="notices"]').prop('checked',true);
　　}

});   这边根据楼下的建议，不再使用each了。

 

　　逻辑上是没什么问题的，但是结果却出乎意料，全选之后，再次点击，页面直接没反应了，首先检查了一遍代码，发现没有什么语法的问题，继续寻找问题，我用的是chrome 浏览器，进度debug模式，发现js脚本也没报错，我刚开始以为是浏览器的兼容性问题，使用IE10,火狐调试依然有这个问题，很是苦恼，就在网上寻找答案，有人提示说 attr和prop在jquery中的用法可能不太一样，于是就去寻找jquery API，

果然找到了 可用的信息，以下是官网文档说明：

Attributes vs. Properties

attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 在jQuery1.6之前，这些属性使用.attr()方法取得，但是这并不是元素的attr属性。他们没有相应的属性（attributes），只有特性(property)。

例如，考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ，并假设它是一个JavaScript变量命名的e

elem.checked	true (Boolean) 将随着复选框状态的改变而改变
$(elem).prop("checked")	true (Boolean) 将随着复选框状态的改变而改变
elem.getAttribute("checked")	"checked" (String) 复选框的初始状态;不会改变
$(elem).attr("checked") (1.6)	"checked" (String) 复选框的初始状态;不会改变
$(elem).attr("checked") (1.6.1+)	"checked" (String) 将随着复选框状态的改变而改变
$(elem).attr("checked") (pre-1.6)	true (Boolean) 将随着复选框状态的改变而改变

根据W3C的表单规范 ，在checked属性是一个布尔属性， 这意味着,如果这个属性（attribute）是目前存在， 即使，该属性没有对应的值，或者被设置为空字符串值，或甚至是"false"，相应的属性（property）为true。 这才是真正的所有布尔属性（attributes）。

然而，要记住的最重要的概念是checked特性（attribute）不是对应它checked属性（property）。特性（attribute）实际对应的是defaultChecked属性（property），而且仅用于设置复选框最初的值。checked特性（attribute）值不会因为复选框的状态而改变，而checked属性（property）会因为复选框的状态而改变。因此，  跨浏览器兼容的方法来确定一个复选框是否被选中，是使用该属性（property）：

• if ( elem.checked )
• if ( $(elem).prop("checked") )
• if ( $(elem).is(":checked") )

对于其他的动态属性，同样是true，比如 selected 和 value.

以上API说的很清楚，checked是布尔属性，而checked特性不是对应它checked属性，它对应的是defaultChecked属性，即它是不会随着复选框的状态而改变的。

此时我看了我的Jquyer 版本

<script type="text/javascript" src="jquery-1.11.1/jquery.min.js"></script>

1.11.1比1.6.1高了好几个版本，我首先把上面的代码的attr方法全部替换成prop方法，测试，通过，好使！

然后我又从网上下载一个比1.6.1版本低的jquery，用以上的代码，也可以实现 全选/反选。