单击功能后在表格中切换复选框答案

【问题标题】：toggle checkboxes in a table after click function单击功能后在表格中切换复选框
【发布时间】：2012-11-01 18:29:28
【问题描述】：

我需要这个功能在页面加载后才能工作。错误是缺失的；在真实行上的语句错误之前。此外，当复选框切换全部被单击为“已选中”时，我希望它将表中的类 checkall 标记为 true，并且当再次单击切换所有复选框时，将表中的所有复选框标记为 false。看起来几乎是正确的，但括号有些错误。

$(document).ready(function()  {
     $('#toggle-all, input:checkbox').click(
     function () {
        $('#table, :checkbox').attr(':checked','checked').true);
     },function(){
        $('#table :checkbox').attr(':checked').false);
     }
  );
});



 <section id="main">
     <form id="task-list"> <input id="toggle-all" name="toggle-all" type="checkbox" /> 
      </form>
 </section>

 <table class="table" >
     <tr>
         <td><input type="checkbox" class="checkall"  />item.todo </td>
         <td> item.name</td><td>
     </tr>
......  more rows
 </table>

【问题讨论】：

将您的代码放到 jsfiddle.net 上，我们很容易为您提供帮助。
仅供参考：您不能将两个函数分配给单击，第一个函数引用#table 和复选框，第二个函数是#table 中的复选框（加上#表不存在，.table 存在）。您应该使用 prop 而不是 attr，并且不要使用“.false”或“.true”。无论如何，下面的工作解决方案。

标签： javascript jquery checkbox toggle

【解决方案1】：

简单的解决方案：

$(document).ready(function() {

    $("#toggle-all").click(function() {
        $(".table input:checkbox").each(function() {
            $(this).prop("checked", !$(this).prop("checked"));
        });
    });

});

更防弹（总是同时切换所有复选框）：

$(document).ready(function() {

    $("#toggle-all").click(function() {
        $(".table input:checkbox").prop("checked", $(this).prop("checked"));
    });

});

演示：http://jsfiddle.net/Ck43Z/1/

【讨论】：

【解决方案2】：

当您使用 attr() 和 prop() 检索输入的状态时，attr() 指的是其默认状态（如 HTML 中所写），而 prop() 指的是其当前状态（将更改如果你点击它，等等）。

当您使用它们设置新状态时，它们会做同样的事情；但最好养成使用 prop() 设置“已检查”值的习惯。

$('#toggle-all').click(function() {
    $('table input:checkbox').prop('checked', $(this).is(':checked'));
});

这只是写作的简写

$('#toggle-all').click(function() {
    if ($(this).is(':checked')) {
        $('table input:checkbox').prop('checked', true);
    } else {
        $('table input:checkbox').prop('checked', false);
    }
});

因为，通过 if 语句的性质，如果我们在第一个分支，表达式 $(this).is(":checked") 无论如何都是真的，如果我们在第二个分支它将是错误的。所以，在我们写 'true' 和 'false' 的地方，我们可以在这两种情况下都写成 $(this).is(":checked")。这样做之后，两个分支都说完全一样的东西，所以我们不再需要将它们写在 if 语句中。

$(this) 指的是被点击的元素（即复选框）。如果你想在 jQuery 中引用事件，你可以这样做：

$('.element').click(function(e) {
    // the variable e now refers to the event
});

【讨论】：