Làm cách nào để triển khai hộp kiểm "Chọn tất cả" trong ứng dụng ASP.NET MVC?

Question

Tôi có một bảng có một cột đầy các hộp kiểm. Ở trên cùng, tôi muốn có một hộp kiểm "Chọn tất cả" để kiểm tra tất cả các hộp kiểm trên trang đó.

Tôi nên triển khai tính năng này như thế nào? Tôi đang sử dụng jQuery làm khung JavaScript của tôi nếu nó quan trọng.

Answer 1

jquery (EDITED để chuyển séc/bỏ chọn tất cả):

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

Lý do tại sao tôi phải làm một click() sau đó kiểm tra cho checked tình trạng là bởi vì nếu bạn cố gắng "toggle" một ô trống, hộp kiểm đang được bật sẽ không giữ lại trạng thái đã kiểm tra của nó. Bằng cách này, nó giữ trạng thái kiểm tra và chuyển đổi hiệu quả.

HTML:

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

Answer 2

KingNestor:

Bạn cũng sẽ cần phải liên kết này (nếu bạn chưa phát hiện ra nó):

http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysLists...

Answer 3

Trong khi các câu trả lời được đăng trước đó sẽ hoạt động, bạn sẽ gặp sự cố nếu bạn có nhiều bộ hộp kiểm trong một trang.

Định dạng này sẽ làm việc bất kể:

<table> 
    <thead> 
     <tr> 
      <th><input type="checkbox" /></th> 
      <th>Column 1</th> 
      <th>Column 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>Tabular Data 1</td> 
      <td>Tabular Data 2</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>Tabular Data 3</td> 
      <td>Tabular Data 4</td> 
     </tr> 
    </tbody> 
</table> 

và kịch bản ...

$(function() { 
    $('th > :checkbox').click(function() { 
     $(this).closest('table') 
      .find('td > :checkbox') 
      .attr('checked', $(this).is(':checked')); 
    }); 
}); 

Answer 4

Hơi sửa đổi đánh dấu câu trả lời từ Marve của (cho ID để bàn)

Working Demo →

EDIT:

Phiên bản cập nhật trong đó hộp kiểm 'selectAll' phản ánh chính xác trạng thái của hộp kiểm. Ví dụ. nếu bạn chọn tất cả hộp kiểm theo cách thủ công, hãy chọnTất cả hộp kiểm sẽ tự động được chọn. Thử bản demo để hiểu hành vi.

Code:

<table id='myTable'> 
    <thead> 
     <tr> 
      <th><input type="checkbox" /></th> 
      <th>Column 1</th> 
      <th>Column 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>Tabular Data 1</td> 
      <td>Tabular Data 2</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>Tabular Data 3</td> 
      <td>Tabular Data 4</td> 
     </tr> 
    </tbody> 
</table> 

jQuery của bạn có thể đơn giản như thế này:

$(document).ready(
    function() 
    { 
     $('#myTable th input:checkbox').click(
      function() 
      { 
       $('#myTable td input:checkbox').attr('checked', $(this).attr('checked')); 
      } 
     ); 

     //The following code keeps the 'selectAll' checkbox in sync with 
     //the manual selection of the checkboxes by user. This is an additional usability feature. 
     $('#myTable tr input:checkbox').click(
      function() 
      { 
       var checkedCount = $('#myTable td input:checkbox:checked').length; 
       var totalCount = $('#myTable td input:checkbox').length; 
       $('#myTable th input:checkbox').attr('checked', checkedCount === totalCount); 
      } 
     ); 
    } 
); 

Answer 5

này sẽ giữ tất cả các hộp kiểm cá nhân giống như "rà soát tất cả" một

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

Điều này sẽ giữ "kiểm tra tất cả" một đồng bộ hóa với việc các hộp kiểm riêng lẻ có thực sự là c hecked or not

$(".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 6

Hãy thử điều này Đối với bảng HTML.

<table class="rptcontenttext" style="width: 100%; border-style: solid; border-collapse: collapse" 
     border="1px" cellpadding="0" cellspacing="0"> 
     <thead> 
      <tr> 
      <th style="text-align:left;width:10px;"> 
      <input type="checkbox" value="true" name="chkVerifySelection" id="chkVerifySelection" onchange="return  checkAllVerifySelection();" /> 
      </th> 
      <td class="rptrowdata" align="left"> 
       Employee ID 
      </td> 
      </tr> 
     </thead> 
     <tbody style="overflow-y: auto; overflow-x: hidden; max-height: 400px; width: 100%;"> 
      @for (int i = 0; i < Model.EmployeeInformationList.Count; i++) 
      {  
      <tr> 
      <td style="width:10px">  
       @{ 
       if (Model.EmployeeInformationList[i].SelectStatus==true) 
       { 
       @Html.CheckBoxFor(model => model.EmployeeInformationList[i].SelectStatus, new { @class = "VerifyStatus" ,disabled =     "disabled",@checked="checked" }) 
       } 
       else 
        { 
        @Html.CheckBoxFor(model => model.EmployeeInformationList[i].SelectStatus, new { @class = "VerifyStatus" }) 
        } 
       }   
      </td>    
      <td class="rptrowdata" align="left" style="width: 70px"> 

       @Html.Encode(Model.EmployeeInformationList[i].StrEmpID) 

      </td> 
       <td class="rptrowdata" align="center" style="width: 50px"> 
       @Html.HiddenFor(m=>m.EmployeeInformationList[i].strEmpOldCardNo) 
       @Html.Encode(Model.EmployeeInformationList[i].strEmpOldCardNo) 
      </td> 
      </tr> 
      } 
     </tbody> 
     </table> 

Script:

function checkAllVerifySelection() { 
    var flag = $('input[name=chkVerifySelection]').is(':checked'); 
    if (flag) { 
     $(".VerifyStatus").each(function() { 
     $(this).attr('checked', true); 
     }); 
    } 
    else { 
     $(".VerifyStatus").each(function() { 
     $(this).attr('checked', false); 
     }); 
    } 
    return true; 
    }