How to click on a table row with checkboxes and when the last table row button is reached the selection changes to deselect

Question

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>

Answer 1

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 三元< /p>

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
});

sssccc


  

    

      

      
Name
      
Surname
      
Gender
      
Age
    
  
  

    

      

      
Cliff
      
Deon
      
Male
      
52
    
    

      

      
Dennis
      
Van Zyl
      
Male
      
25