复选框应用及遇到的问题

最近在重新翻看继续学习《锋利的jQuery》这本书中对复选框最基本的应用（对复选框进行全选、全不选和反选），在全选和全不选中遇到了一个诡异的问题

html代码：

                <div>
                    你的爱好运动是？
                    <input type="checkbox" name="items" value="足球" />足球
                    <input type="checkbox" name="items" value="篮球" />篮球
                    <input type="checkbox" name="items" value="羽毛球" />羽毛球
                    <input type="checkbox" name="items" value="乒乓球" />乒乓球
                </div>
                <div>
                    <input type="button" id="checkAll" name="name" value="全选" />
                    <input type="button" id="checkNo" name="name" value="全不选" />
                    <input type="button" id="checkedRev" name="name" value="反选" />
                    <input type="button" id="summit" name="name" value="提交" />
                </div>

 

jQuery代码：

$("#checkAll").click(function() {     //全选
        $("[name=items]:checkbox").attr('checked', true);
    });
    $("#checkNo").click(function() {  //全不选
        $("[name=items]:checkbox").attr('checked', false);
    })
    $("#checkedRev").click(function() {  //反选
        $("[name=items]:checkbox").attr(function() {
            this.checked = !this.checked;
        });
    });

然而这样写会出现一个奇怪又诡异的问题：第一次执行全选然后执行全不选或者先执行全不选然后全选时，程序是运行正常的，然后当点击第二次全选或者全不选时，选项前面的勾就没有再勾上了。

 

这时我们就不得不谈谈jQuery中attr（）和prop（）方法的异同了：

在jQuery1.6版之前，都是使用attr（）方法来访问对象属性的，例如取一个图片的alt属性，就可以使用$(“img”).attr(“alt”)

但是在访问input的disabled属性的时候，就会有些问题。在有些浏览器里，只要写了disabled属性就可以，有些则要写：disabled=“disabled”。

而在使用prop时。返回值是标准属性：true/false，例如$(“#check”).prop(“checked”)不会返回“disabled”或“”只会返回true/false。

当然，赋值的时候也如此。

 

那什么情况下使用attr（）什么时候使用attr呢：

第一个原则：只添加属性名称该属性就会生效应该使用prop（）

第二个原则：只存在true/false的属性应该使用prop（）

因此，代码更正如下：

$("#checkAll").click(function() {     //全选
        $("[name=items]:checkbox").prop('checked', true);
    });
    $("#checkNo").click(function() {  //全不选
        $("[name=items]:checkbox").prop('checked', false);
    })
    $("#checkedRev").click(function() {  //反选
        $("[name=items]:checkbox").prop(function() {
            this.checked = !this.checked;
        });
    });