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，用以上的代码，也能够实现 全选/反选。