启用/禁用复选框

Question

我有以下几点：$(document).ready(function(){    $("#select-all-teammembers").click(function() {        $("input[name=recipients\\[\\]]").attr('checked', true);    });                 });我希望id="select-all-teammembers"单击时可以在已选中和未选中之间切换。有想法吗？那不是几十行代码吗？

Answer 1

你可以写：

$(document).ready(function() {

    $("#select-all-teammembers").click(function() {

        var checkBoxes = $("input[name=recipients\\[\\]]");

        checkBoxes.prop("checked", !checkBoxes.prop("checked"));

    });                 

});

在jQuery 1.6之前，当我们只有attr（）而不是prop（）时，我们曾经这样写：

checkBoxes.attr("checked", !checkBoxes.attr("checked"));

但是，prop()与attr()应用于“布尔” HTML属性相比，它具有更好的语义，因此在这种情况下通常是首选的。

Answer 2

我知道这很旧，但是问题有点模棱两可，因为切换可能意味着每个复选框都应该切换其状态，无论是什么状态。如果您有3个选中项和2个未选中项，则切换将使前3个处于未选中状态，而最后2个处于选中状态。

为此，这里的所有解决方案都不起作用，因为它们使所有复选框具有相同的状态，而不是切换每个复选框的状态。$(':checkbox').prop('checked')对许多复选框执行操作会在所有.checked二进制属性之间返回逻辑与，即，如果未选中其中之一，则返回值为false。

.each()如果要实际切换每个复选框状态而不是使它们都相等，则需要使用，例如

   $(':checkbox').each(function () { this.checked = !this.checked; });

请注意，您不需要$(this)在处理程序内部，因为该.checked属性存在于所有浏览器中。