我的表格在表格外側有複選框和按鈕，可以從選擇切換到取消選擇，如何單擊表格行上的任意位置以及我的複選框勾選我將被一一選擇的位置以及何時到達最後一個表格行我的按鈕從選擇更改為取消選擇，我確實設法單擊表格行和復選框勾選，我失敗的是當我到達最後一個表格行並且按鈕從選擇更改為取消選擇時。
我試圖取得行的長度
$('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 });