如何在我的ASP.NET MVC應用程序中實現「全選」複選框？

Question

我有一個列滿了複選框的表。在頂部，我希望有一個「全選」複選框來檢查該頁面上的所有複選框。

我該如何實施？如果它很重要，我使用jQuery作爲我的JavaScript框架。

Answer 1

的jQuery（EDITED切換選中/取消全部）：

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

我之所以不得不做click()然後檢查checked狀態，因爲如果你嘗試「toggle」複選框，被切換的複選框將不會保留其檢查狀態。這樣它保留了檢查狀態並有效切換。

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：

你也將需要此鏈接（如果你還沒有發現它）：

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

Answer 3

雖然以前發佈的答案會有效，如果您在單個頁面中有多個複選框，您將遇到問題。

這種格式無論工作：

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

和腳本...

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

Answer 4

略有Marve的回答修改標記（給ID表）

Working Demo →

編輯：

更新後的版本，其中'selectAll'複選框正確地反映了複選框的狀態。例如。如果您手動選中所有複選框，selectAll複選框將自動進行檢查。嘗試演示以瞭解行爲。

代碼：

<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的可能是像這樣簡單：

$(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

這將讓所有的個人複選框一樣的 「檢查所有」 一個

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

這將保持「全部檢查」與個別複選框實際上是否全部同步hecked與否

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

試試這個對於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> 

腳本：

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