我的表格在表格外侧有复选框和按钮，可以从选择切换到取消选择，如何单击表格行上的任意位置以及我的复选框勾选我将被一一选择的位置以及何时到达最后一个表格行我的按钮从选择更改为取消选择，我确实设法单击表格行和复选框勾选，我失败的是当我到达最后一个表格行并且按钮从选择更改为取消选择时。
我试图获取行的长度
$('tr').click(function(event) {
var $target = $(event.target);
if (!$target.is('input:checkbox')) {
var select_chk = document.getElementById("button1");
$(this).find('input:checkbox').each(function() {
if ((this.checked)) {
this.checked = false;
button.value = "Unselect"
} else {
this.checked = true;
button.value = "Select"
}
})
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="check" value="Select" />
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Surname</th>
<th>Gender</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>Cliff</td>
<td>Deon</td>
<td>Male</td>
<td>52</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Dennis</td>
<td>Van Zyl</td>
<td>Male</td>
<td>25</td>
</tr>
</tbody>
</table>
有几个问题。
这是一个工作版本，还可以处理单击按钮
我计算选中的复选框数量等于复选框总数。
我向 tbody 添加了 ID
我还使用三元
const $select_chk = $("#check"); const $table = $("#tbl") const $checks = $table.find('input:checkbox') const checkLength = $checks.length; $table.on("click","tr", function(e) { if (!e.target.matches("[type=checkbox]")) { // if not a checkbox $(this).find("input:checkbox").click() // click it anyway } $select_chk.val(checkLength === $table.find('input:checkbox:checked').length ? "Unselect" : "Select"); }); $select_chk.on("click", function() { // we need function to get "this" const chk = this.value === "Select"; // check if text is select $checks.each(function() { this.checked = chk; }); $select_chk.val(chk ? "Unselect" : "Select"); // toggle the text });