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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 });