我是 jquery 新手,但我设法根据我的需要调整代码。 我的想法是,我需要一组复选框,其中只能选中 1 个(单选按钮不是一个选项)。
以下代码完美运行。
<!doctype html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr >
<input type='checkbox' class='ART2' id='ART2_DE'>DE
<input type='checkbox' class='ART2' id='ART2_EN'>EN
<input type='checkbox' class='ART2' id='ART2_FR'>FR
<script type="text/javascript">
$('input.ART2').on('change', function(evt) {if($(this).siblings(':checked').length >= 1) { this.checked = false; }});
</script>
</tr>
</table>
</body>
</html>
如果我添加数据单元格“< th >”,代码将不再起作用。
<!doctype html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr >
<th><input type='checkbox' class='ART2' id='ART2_DE'>DE</th>
<th><input type='checkbox' class='ART2' id='ART2_EN'>EN</th>
<th><input type='checkbox' class='ART2' id='ART2_FR'>FR</th>
<script type="text/javascript">
$('input.ART2').on('change', function(evt) {if($(this).siblings(':checked').length >= 1) { this.checked = false; }});
</script>
</tr>
</table>
</body>
</html>
有人可以解释一下我的原因吗?
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<th><input type='checkbox' class='ART2' id='ART2_DE'>DE</th>
<th><input type='checkbox' class='ART2' id='ART2_EN'>EN</th>
<th><input type='checkbox' class='ART2' id='ART2_FR'>FR</th>
</tr>
<script type="text/javascript">
$('input.ART2').on('change', function(evt) {
var parentRow = $(this).closest('tr');
if (parentRow.find(':checked').length >= 1) {
this.checked = false;
}
});
</script>
</table>
</body>
</html>