jQuery compter le nombre de cases cochées

Utilisez jQuery pour compter le nombre de cases à cocher dans la table

Ce qui suit est un simple extrait de code jQuery pour compter le nombre de cases sélectionnées dans le tableau:

<code class="language-javascript">$('#table :input[type="checkbox"]:checked').length</code>

JQUERY Statistics Boxs Count FAQ

Comment compter le nombre de cases à cocher avec un JavaScript pur?

Bien que jQuery fournit un moyen facile et efficace de compter le nombre de cases, vous pouvez également utiliser Pure JavaScript pour implémenter cette fonctionnalité. Vous pouvez utiliser la méthode querySelectorAll pour sélectionner toutes les cases à cocher, puis utiliser la méthode Array.prototype.filter pour filtrer les cases à cocher sélectionnées. Voici un exemple simple:

<code class="language-javascript">let checkboxes = document.querySelectorAll('input[type="checkbox"]');
let checked = Array.from(checkboxes).filter(input => input.checked);
console.log(checked.length);</code>

Ce code enregistrera le nombre de cases à cocher sélectionnées dans la console.

Comment compter le nombre de cases en temps réel?

Oui, vous pouvez utiliser l'événement .change() de jQuery pour compter le nombre de cases en temps réel. Cet événement est déclenché chaque fois que l'état de la case modifie. Vous pouvez utiliser cet événement pour mettre à jour le nombre lorsque la case est sélectionnée ou non contrôlée. Voici un exemple:

<code class="language-javascript">$('input[type="checkbox"]').change(function() {
  let count = $('input[type="checkbox"]:checked').length;
  console.log(count);
});</code>

Ce code enregistre le nombre de cases à cocher actuellement sélectionnées sur la console lorsque la case à cocher est sélectionnée ou non contrôlée.

Comment afficher le nombre de cases à cocher sur ma page?

Vous pouvez afficher le numéro de cases sélectionnées sur une page Web en mettant à jour le contenu texte de l'élément HTML. Voici un exemple:

<code class="language-javascript">$('input[type="checkbox"]').change(function() {
  let count = $('input[type="checkbox"]:checked').length;
  $('#count').text(count);
});</code>

Dans cet exemple, #count est l'ID de l'élément HTML à afficher pour le comptage.

Comment compter le nombre de cases à cocher sélectionnées dans un groupe spécifique?

Oui, vous pouvez utiliser un sélecteur plus spécifique pour compter le nombre de cases à cocher sélectionnées dans un groupe spécifique. Par exemple, si votre case à cocher est à l'intérieur d'un div avec id group1, vous pouvez compter le nombre de cases à cocher sélectionnées dans le groupe comme celle-ci:

<code class="language-javascript">$('div#group1 input[type="checkbox"]').change(function() {
  let count = $('div#group1 input[type="checkbox"]:checked').length;
  console.log(count);
});</code>

Ce code enregistrera le nombre de cases à cocher sélectionnées dans group1 à la console.

Comment compter le nombre de cases à cocher non contrôlées?

Vous pouvez utiliser le sélecteur :not(:checked) pour compter le nombre de cases à cocher non contrôlées. Voici un exemple:

<code class="language-javascript">let count = $('input[type="checkbox"]:not(:checked)').length;
console.log(count);</code>

Ce code enregistrera le nombre de cases à cocher non contrôlées sur la console.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!