如何在ASP.NET MVC应用程序中实现"全选"复选框？

Question

我有一个表格,其中有一列充满了复选框.在顶部,我想有一个"全选"复选框,可以检查该页面上的所有复选框.

我该如何实现呢？如果重要的话,我正在使用jQuery作为我的JavaScript框架.

Answer 1

这将使所有单独的复选框与"全部检查"复选框相同

$("#id-of-checkall-checkbox").click(function() {
    $(".class-on-my-checkboxes").attr('checked', this.checked);
});

这将使"全部检查"保持与单个复选框是否实际全部被检查同步

$(".class-on-my-checkboxes").click(function() {
    if (!this.checked) {
        $("#id-of-checkall-checkbox").attr('checked', false);
    }
    else if ($(".class-on-my-checkboxes").length == $(".class-on-my-checkboxes:checked").length) {
        $("#id-of-checkall-checkbox").attr('checked', true);
    }
});

Answer 2

jquery（已编辑以切换选中/取消选中所有）：

$(document).ready(function() {
    $("#toggleAll").click(function() {  
      $("#chex :checkbox").attr("checked", $(this).attr("checked"));
    });    
});

我必须执行click()then 检查checked状态的原因是因为如果您尝试 " toggle" 复选框，被切换的复选框将不会保留其选中状态。这样它会保留检查状态并有效地切换。

HTML：

<input type="checkbox" id="toggleAll" />
<div id="chex">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>