选中取消选中所有复选框和另一个复选框使用jquery

Question

我使用jquery-1.9.1.js在我的html页面中,它第一次运行良好.

就像 http://jsfiddle.net/pzCcE/1/

有人可以帮我改进吗？

<table id="tab1">
    <input type="checkbox" name="checkAll" id="checkAll">??
    <input type="checkbox" name="book" id="book" value="book1">book1
    <input type="checkbox" name="book" id="book" value="book2">book2
    <input type="checkbox" name="book" id="book" value="book3">book3
    <input type="checkbox" name="book" id="book" value="book4">book4
    <input type="checkbox" name="book" id="book" value="book5">book5</table>

$(function () {
    $("#tab1 #checkAll").click(function () {
        if ($("#tab1 #checkAll").is(':checked')) {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).attr("checked", true);
            });

        } else {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).attr("checked", false);
            });
        }
    });
});

Answer 1

更改

$(this).attr("checked", true);

至

$(this).prop("checked", true);

jsFiddle例子

我其实只是回答了另一个与此类似的问题.根据.prop()文档:

.prop()方法是设置属性值的便捷​​方式 - 尤其是在设置多个属性时,使用函数返回的值或一次设置多个元素的值.设置selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked或defaultSelected时应该使用它.从jQuery 1.6开始,无法再使用.attr()方法设置这些属性.它们没有相应的属性,只是属性.

属性通常会影响DOM元素的动态状态,而不会更改序列化的HTML属性.示例包括输入元素的value属性,输入和按钮的disabled属性或复选框的checked属性.应该使用.prop()方法来设置disabled和checked而不是.attr()方法.应该使用.val()方法来获取和设置值.

Answer 2

您应该使用具有相同名称的类,ID必须是唯一的!

<input type="checkbox" name="checkAll" id="checkAll">??
<input type="checkbox" name="book" class="book" value="book1">book1
<input type="checkbox" name="book" class="book" value="book2">book2
<input type="checkbox" name="book" class="book" value="book3">book3
<input type="checkbox" name="book" class="book" value="book4">book4
<input type="checkbox" name="book" class="book" value="book5">book5</table>

$(function () {
    $("#checkAll").click(function () {
        if ($("#checkAll").is(':checked')) {
            $(".book").prop("checked", true);
        } else {
            $(".book").prop("checked", false);
        }
    });
});