My table has checkboxes and buttons outside the table to toggle from selection to deselection, how do I click anywhere on the table rows and where do I get my checkboxes to be selected one by one as well When I reach the last table row my button changes from select to deselect, I do manage to click on the table row and the checkbox ticks, what I fail with is when I reach the last table row and the button changes from select to deselect hour.
I'm trying to get the length of the line
$('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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
There are a few questions.
This is a working version that also handles button clicks
I count the number of checked checkboxes equal to the total number of checkboxes.
I added ID to tbody
I also use 三元
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 });