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
P粉752826008
P粉752826008 2024-02-17 19:35:31
0
1
393

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>

P粉752826008
P粉752826008

répondre à tous(1)
P粉245489391

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

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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal