在我的 ASP.NET MVC 5 应用程序的 View 中,我有两个表,表中的每一行都有一个动态生成的复选框。
我正在尝试为两个表添加“全选”/“取消全选”功能。
以下是两个复选框:
<input id="ALL" class="CheckAll" type="checkbox" value="All" /><b>Select / Unselect All</b>
<input id="ALLt2" class="CheckAllt2" type="checkbox" value="All" /><b>Select / Unselect All</b>
以下是相关的 HTML 代码:
<table class="table" id="hostsTable">
<thead>
<tr>
<th>FQ</th>
<th>Name</th>
<th>Select?</th>
</tr>
</thead>
<tr>
<td>
VISIBLE FQ VALUE
</td>
<td>
VISIBLE NAME
</td>
<td>
<input Style="vertical-align:3px}" data-val="true" data-val-required="The Checked field is required." id="Hosts_0__Checked" name="Hosts[0].Checked" type="checkbox" value="true" /><input name="Hosts[0].Checked" type="hidden" value="false" />
</td>
</tr>
</table>
两个表的结构相同,第二个表的 ID 是 countersTable 以下是我的 jQuery:
$('.CheckAll').on('change', function () {
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});
//$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
$('#hostsTable tr input:checkbox:not(".CheckAll")').on('change', function () {
if (!this.checked) {
$(this).parent().parent().find('.CheckAll').prop('checked', false);
}
var flag = true;
$(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAll)').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$(this).parent().parent().find('.CheckAll').prop('checked', true);
}
});
$('.CheckAllt2').on('change', function () {
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});
//$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
$('#countersTable tr input:checkbox:not(".CheckAllt2")').on('change', function () {
if (!this.checked) {
$(this).parent().parent().find('.CheckAllt2').prop('checked', false);
}
var flag = true;
$(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAllt2)').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$(this).parent().parent().find('.CheckAllt2').prop('checked', true);
}
});
当我单击“全选”/“取消全选”复选框时,两个表中的复选框都会被选中/取消选中。
如何将其限制到相应的表?
提前致谢
最佳答案
我假设您在调用$.parent().parent()
时选择了错误的元素。如果您获取两个表都是子元素的元素,则显然所有 input[type="checkbox"]
都将被选中。
由于两个复选框有不同的类,因此请尝试不要通过 $.parent().parent()
选择,而只需使用 #
id 选择器相关表格。
即更改此:
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
到
$("#hostsTable").find('input[type=checkbox]').prop('checked', this.checked);
用于第一个表,#counterTable
用于第二个表。
关于javascript - jQuery - 选中全部/取消选中 2 个不同表的所有复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45816735/