如何使用JQuery勾选所有复选框？

Question

我是jQuery的初学者，我知道这个问题之前已经被问过了，但我不知道如何正确地为我的HTML做这件事：

<fieldset>
    <legend>ABC</legend>
    <label class="selectAllButton"><input type="checkbox" onclick="SelectAll(this)" />(select all)</label><br />
    <table>

            <tr>
            <td>
                <input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_0" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_0">Discs</label>
                <input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_0" value="9;71;72;108;109" />
                <input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_0" class="xRefButton" />
            </td>
            </tr>

            <tr>
            <td>
                <input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_1" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_1">Drums</label>
                <input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_1" value="73" />
                <input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_1" class="xRefButton" />
            </td>
            </tr>

            <tr>
            <td>
                <input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_2" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_2">Pads</label>
                <input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_2" value="70" />
                <input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_2" class="xRefButton" />
            </td>
            </tr>

    </table>
</fieldset>

我希望这个可以被点击：

<label class="selectAllButton"><input type="checkbox" onclick="SelectAll(this)" />(select all)</label><br />

需要将表格下的所有复选框都勾选或取消勾选。

我尝试了：

// selects all the items in same category
function SelectAll()
{
    $(arguments[0]).siblings('table:eq(0)').find(':checkbox').attr('checked', arguments[0].checked);
}

但是它没有起作用。

- sprocket12

Answer 1

您可以使用

function SelectAll(element)
{
    $(element).closest('fieldset').find('table :checkbox').prop('checked', element.checked);
}

你的版本没有生效的原因是表格不是全选复选框的同级元素，而是包含该复选框的标签的同级元素。

- Gabriele Petrioli

---

谢谢，好的解决方案，帮助我理解了发生了什么。我还读到了关于input[type=checkbox]更快的文章。http://jsperf.com/type-checkbox-vs-checkbox/2 - sprocket12

Answer 2

你需要做类似于这样的事情：

$('.selectAllButton input').click(function() {
    var checked = $(this).is(':checked');
    var el = $('table input[type=checkbox]');

    if(checked) {
        el.attr('checked', 'checked');
    } else {
        el.removeAttr('checked');
    };
});

以下代码看起来没问题，更简单，可以工作，但不完全符合W3C的建议。我不确定它是否能在IE6中工作。

http://jsfiddle.net/yM9yf/1/

$('.selectAllButton input').click(function() {
   var checked = $(this).is(':checked');
   $('table input[type=checkbox]').attr('checked', checked);
});​

http://jsfiddle.net/CAYef/

有用的链接: 1. W3C工作草案: input type=checkbox 2. W3C Wiki: checkbox 3. MSDN: checked属性 4. MDN: input

希望这可以帮助你。

- vitormil

---

不要使用 attr 来设置 checked 属性。 - Bergi

为什么不呢？我编辑了我的答案，现在使用 removeAttr 来取消选中。 - vitormil

嗨，我在这里阅读了attr和prop之间的区别 - https://dev59.com/LW025IYBdhLWcg3wqX1o - sprocket12