Question

我需要在加载页面后才能使用此功能。错误是缺失的;在真行之前的语句错误。此外，当复选框toggle-all被单击为“已选中”时，我希望它将表中的类标记为checkall，并将其设置为true，当再次单击toggle-all复选框时，将表中的所有复选框标记为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>

Answer 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/

Answer 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
});

单击功能后切换表格中的复选框

2 个答案: