Jadual saya mempunyai kotak pilihan dan butang di luar jadual untuk menogol daripada pemilihan kepada nyahpilihan, bagaimana saya boleh mengklik mana-mana pada baris jadual dan di mana saya boleh mendapatkan tanda kotak semak saya, saya akan dipilih satu demi satu dan apabila Mencapai baris jadual terakhir, baris butang saya perubahan daripada dipilih kepada dinyahpilih, saya berjaya mengklik pada baris jadual dan kotak semak ditandakan, di mana saya gagal adalah apabila saya mencapai baris jadual terakhir dan butang berubah daripada dipilih kepada dinyahpilih.
Saya cuba dapatkan panjang baris
$('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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ada beberapa soalan.
Ini adalah versi berfungsi yang juga mengendalikan klik butang
Saya mengira bilangan kotak pilihan yang ditandakan sama dengan jumlah bilangan kotak pilihan.
Saya menambah ID pada tbody
Saya juga menggunakan 三元
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 });