如何在我的 ASP.NET MVC 应用程序中实现“全选”复选框？
Posted
技术标签:
【中文标题】如何在我的 ASP.NET MVC 应用程序中实现“全选”复选框？【英文标题】：How can I implement a "Select All" checkbox in my ASP.NET MVC app? 【发布时间】：2010-11-15 21:08:59 【问题描述】：我有一个表格，其中有一列充满了复选框。在顶部，我希望有一个“全选”复选框来检查该页面上的所有复选框。
我应该如何实现这个？如果重要的话，我会使用 jQuery 作为我的 javascript 框架。
【问题讨论】：
【参考方案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);
);
【讨论】：
这看起来像是 else if case 不起作用...当所有子复选框都被选中时，它应该将 checkall 复选框设置为 true。有什么想法吗？ 我想我想通了...在 ":checked" 之前添加了一个空格并且它起作用了。【参考方案2】：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>
【讨论】：
那些看起来像 ASP.NET 复选框，而不是 ASP.NET-MVC。 MVC 只会使用常规的 html 复选框。这会如何改变事情？ 使用此解决方案，如果用户取消选中“全选”复选框，则复选框将保持选中状态。请参阅下面的 jQuery 回答来处理选择和取消选择所有框。 @kingnestor - 它不会改变任何东西。使用您的标准复选框，这将起作用。 您应该创建一个基于表格标记的示例，其中全选复选框出现在标题行中。当前示例标记与问题中列出的完全不同。 另外，您正在使用“段落”进行切换，而 OP 想要一个复选框来切换状态。【参考方案3】：对我来说，Jeremy 的解决方案最有效，但我不得不用.prop 替换 .attr。否则，一旦我单击一个复选框，它就会停止对“主”复选框做出反应。
在 _Layout.cshtml（母版页）中
$(document).ready(
manageCheckboxGroup('chkAffectCheckboxGroup', 'checkbox-group')
);
在引用的 .js 中
function manageCheckboxGroup(masterCheckboxId, slaveCheckboxesClass)
$("#" + masterCheckboxId).click(function ()
$("." + slaveCheckboxesClass).prop('checked', this.checked);
);
$("." + slaveCheckboxesClass).click(function ()
if (!this.checked)
$("#" + masterCheckboxId).prop('checked', false);
else if ($("." + slaveCheckboxesClass).length == $("." + slaveCheckboxesClass + ":checked").length)
$("#" + masterCheckboxId).prop('checked', true);
);
在 HTML（Razor）页面中
<table class="table">
<thead>
<tr>
<th><input id="chkAffectCheckboxGroup" type="checkbox" checked="checked" /></th>
<th>
@Html.DisplayNameFor(model => model.Clients[0].ClientId)
</th>
<th>
@Html.DisplayNameFor(model => model.Clients[0].Name)
</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Clients.Count(); i++)
<tr>
<td>
<input type="hidden" asp-for="Clients[i].Id" class="form-control" />
<input type="hidden" asp-for="Clients[i].Name" />
<input type="checkbox" class="checkbox-group" asp-for="Clients[i].Selected" />
</td>
<td>
@Html.DisplayFor(modelItem => Model.Clients[i].Id)
</td>
<td>
@Html.DisplayFor(modelItem => Model.Clients[i].Name)
</td>
</tr>
</tbody>
</table>
重要提示：
另外，起初我在 HTML 中有一个 @foreach 循环，但它不起作用......，您必须使用 @for (int i = 0; i < Model.Clients.Count(); i++) 循环，否则您最终会在 OnPostAsync() 中得到一个空列表。
【讨论】：
【参考方案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);
);
);
【讨论】：
和我上面的评论一样...这对我不起作用，直到我在 ":checked" 选择器前放了一个空格。【参考方案5】：虽然之前发布的答案有效，但如果您在单个页面中有多个复选框，则会遇到问题。
无论如何，这种格式都可以使用：
<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'));
);
);
【讨论】：
这比需要的 jquery 多得多。只要添加了正确的选择器，无论格式如何，我的都可以使用 @Jason：我当然同意用更少的代码可以达到同样的效果，但无论如何，我的答案中显示的方法将允许多组复选框存在于单个页面中。【参考方案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;
【讨论】：
【参考方案7】：试试这个：
@Html.CheckBox("CheckAll", false, new id = "select_all" )
$('#select_all').click(function ()
$('.someClass').prop('checked', this.checked)
);
【讨论】：
【参考方案8】：使用下面的代码
$(document).ready(function ()
$("#ckbCheckAll").click(function ()
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
);
$(".checkBoxClass").change(function()
if (!$(this).prop("checked"))
$("#ckbCheckAll").prop("checked",false);
)
);
【讨论】：
以上是关于如何在我的 ASP.NET MVC 应用程序中实现“全选”复选框？的主要内容，如果未能解决你的问题，请参考以下文章