0

加载页面后，我需要此功能才能工作。错误是缺失的；在真实行上的语句错误之前。此外，当复选框切换全部被单击为“已选中”时，我希望它将表中的类 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>
4

2 回答 2

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/

于 2012-11-13T10:20:49.593 回答
1

当您使用 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
});
于 2012-11-15T09:10:56.243 回答