Comment cliquer sur une ligne de tableau avec des cases à cocher et lorsque le bouton de la dernière ligne de tableau est atteint, la sélection change pour désélectionner

Question

Mon tableau comporte des cases à cocher et des boutons à l'extérieur du tableau pour passer de la sélection à la désélection. Comment puis-je cliquer n'importe où sur les lignes du tableau et où dois-je cocher mes cases ? Je serai sélectionné une par une et lorsque j'atteindrai la dernière ligne du tableau, mon bouton passe de sélectionné à désélectionné, j'ai réussi à cliquer sur la ligne du tableau et la case à cocher, là où j'ai échoué, c'est lorsque j'ai atteint la dernière ligne du tableau et que le bouton est passé de sélectionné à désélectionné.

J'essaie d'obtenir la longueur de la rangée

$('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

Vous avez quelques questions.

Il s'agit d'une version fonctionnelle qui gère également les clics sur les boutons

Je compte le nombre de cases cochées égal au nombre total de cases à cocher.

J'ai ajouté une pièce d'identité à tbody

J'utilise aussi 三元< /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