.design .design

jQuery, déterminer le nombre d’éléments input checkbox cochés

J'ai dû récemment me confronter à la création d'un questionnaire HTML dont l'objectif était d'afficher en direct le score du répondant. Mon premier réflexe a été Google. Durant 20 min., j'ai recherché un plugin WordPress pouvant correspondre à mon besoin. Vaine recherche.

.design
.design

Lasse de ma paresse, je vais me balader sur l’API jQuery où j’ai trouvé le sélecteur checked. Une merveille pour créer en quelques minutes un bloc Score total au sein d’un questionnaire. Découvrez le détail de l’astuce.

Pour consulter le résultat de mon dur labeur :

Explorer la démo

Tutoriel – sélecteur jQuery checked

La première chose à faire est de créer votre questionnaire. Il faut donc mettre en place un formulaire HTML contenant une liste de contrôles du type checkbox :

<form>
  <ol>
    <fieldset>
      <legend>Questionnaire</legend>
      <li><label><input type="checkbox" name="nom" value="1" /> Item un</label></li>
      <li><label><input type="checkbox" name="nom" value="2" /> Item deux</label></li>
      <li><label><input type="checkbox" name="nom" value="3" /> Item trois</label></li>
      <li><label><input type="checkbox" name="nom" value="4" /> Item quatre</label></li>
      <li><label><input type="checkbox" name="nom" value="5" /> Item cinq </label></li>
    </fieldset>
  </ol>
</form>

La suite est très simple, on construit un bloc affichant le score du répondant :

<p class="total"></p>

On comptabilise le nombre de checkboxes cochées via l’utilisation du sélecteur jQuery checked :

<script type="text/javascript">
/* Score total */
var scoretotal = function() {
  var n = $( "input:checked" ).length; // Contrôle nombre checked
  $( "p.total" ).text( "Score : " + n + "/5" ); // Récupération valeur + insertion dans paragraphe
};
scoretotal();
$( "input[type=checkbox]" ).on( "click", scoretotal );
</script>

On définit une variable Score total puis on contrôle combien d’éléments input sont cochés.

La touche finale : on récupère la valeur totale et on l’insère dans le bloc Score total à l’aide de la méthode .text().

Voilà!

Accédez au meilleur des interfaces directement depuis votre boîte mail

Pixels à explorer