如何勾选 1 复选框以选中 html 表格中的所有复选框
本文关键字:复选框 表格 html 何勾选 | 更新日期: 2023-09-27 18:37:18
我正在制作一个aspx页面,我有3个html表,动态地为每个单元格添加复选框。在这里,我为每个表(外侧表)设置了另一个复选框,如果我选中该复选框,那么我想选中相应html表中的所有复选框,在这里我正在使用一些脚本进行检查。但是,如果我选择一个,则页面中的所有复选框(选中 3 个表复选框)也会被选中。如何解决此问题?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.12.1.min.js"></script>
<script type="text/javascript">
function checkAll(bx) {
var cbs = document.getElementsByTagName('input');
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Adjs</h1>
<h4>Select All</h4>
<input type="checkbox" onclick="checkAll(this)" id="chk1" />
<table id="tbl1" runat="server" border="1">
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr> <tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<h1>chgs</h1>
<h4>Select All</h4>
<input type="checkbox" onclick="checkAll(this)" id="chk2" />
<table id="tbl" runat="server" border="1">
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr> <tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<br />
<h1>Pmts</h1>
<h4>Select All</h4>
<input type="checkbox" onclick="checkAll(this)" id="chk3" />
<table id="Table1" runat="server" border="1">
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr> <tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<br />
<div class="cls1">
<h2>Select Condition</h2>
<table id="Table2" runat="server" border="1">
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr> <tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</div>
</form>
</body>
</html>
下面的代码正在动态添加复选框(使用 C#)
Label objLabel = new Label();
CheckBox chk1 = new CheckBox();
objLabel.ID = "lbladj" + i.ToString();
objLabel.Text = dt.Rows[i][0].ToString();
chk1.ID = "chk" + objLabel.Text;
Form.Controls.Add(objLabel);
Form.Controls.Add(chk1);
if (Column < 5)
{
tbl1.Rows[Row].Cells[Column].Controls.Add(objLabel);
tbl1.Rows[Row].Cells[Column].Controls.Add(chk1);
Column++;
}
else
{
Row++;
Column = 0;
tbl1.Rows[Row].Cells[Column].Controls.Add(objLabel);
tbl1.Rows[Row].Cells[Column].Controls.Add(chk1);
Column++;
}
使用 .next()
选择当前元素的下一个直接元素。
:checkbox
=> "选择所有类型元素"复选框
.prop
=> 为匹配元素集设置一个或多个属性 试试这个:
$(':checkbox').on('click', function() {
$(this).next('table').find(':checkbox').prop('checked', this.checked);
});
请尝试以下解决方案。我已经根据您的 html 结构使用了 next() 方法,然后选中所有复选框。
jQuery(':checkbox[id^="chk2"]').on('click', function(){
var $this = jQuery(this);
if($this.is(':checked')) {
$this.next('table').find(':checkbox').prop('checked', true);
} else {
$this.next('table').find(':checkbox').prop('checked', false);
}
});
您也可以为主复选框提供一个id(mainid),给所有其他复选框一个自定义类(CustomClass)。在主复选框上单击 ,使所有其他复选框值为 true。 对于下一个表,给出另一个类(CustomClass2),这样它就不会被选中,而只选中带有$('CustomClass')的复选框
$('#mainid').on('click', function()
{
$('CustomClass').attr("checked", true);
});
或
使用最近的
$('#chk1').click(function(e){
var table= $(e.target).closest('table');
$('td input:checkbox',table).prop('checked',this.checked);
});