gpt4 book ai didi

javascript - 复选框根据 tr 单击进行选择

转载 作者:行者123 更新时间:2023-11-28 14:38:37 24 4
gpt4 key购买 nike

在我的代码中,当您单击第一个 <td> 时,它的复选框被选中。但我的目标是checkbox应该通过 tr click 选择。所以当我点击任何 <tr>它的checkbox将被选中。为此,我已经尝试将点击类“.checktd”替换为“.odd”,但这不起作用。

知道如何实现这一目标吗?

$(".checktd").on("click", function(e) {
if (this != e.target) {
return;
}
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 5px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
</body>

</html>

JsFiddle如果需要,请链接。

最佳答案

  • 修改this!=e.target并检查它是否为复选框。

  • 将选择器从 ".checktd" 更改为 "table tr"。我建议您通过在 tabletr 上添加类来使用更具体的选择器。

$("table tr").on("click", function(e) {
if($(e.target).is("input[type='checkbox']"))
return;
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>

关于javascript - 复选框根据 tr 单击进行选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49022650/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com