Logo SNS - Web et Informatique

SNS - Web et Informatique

Lundi 11 Décembre 2017
06 25 23 34 56
12150, Sévérac-le-Château
 08h00/23h00 - 7j/7
Être rappelé
JQuery : Tout cocher tout décocher multiples checkbox

JQuery : Tout cocher tout décocher multiples checkbox

Publié le .

Voici une astuce pour cocher/décocher une série de checkbox dans un formulaire avec jQuery. Nous allons utiliser pour cela deux inputs de type radio à l'extérieur du formulaire. Pas besoin de tenir compte de la sémantique car jQuery nous permet quelques écarts avec la bonne pratique. Vous pouvez adapter le formulaire pour être raccord avec une validation W3C, nous on s'en passe dans cet exemple et pour des besoins de présentation.

! important, n'oubliez pas d'inclure la librairie jQuery dans votre code entre les balises head/head.

<!-- Nous nommerons notre page index.html : -->
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Tout cocher/décocher avec jQuery</title>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
</head>
<body>
<!-- cocher/décocher -->
<div>
<input type="radio" id="cocher">Tout cocher
<input type="radio" id="decocher">Tout décocher
</div>

<!-- Le formulaire -->
<form action="traitement.php" method="post" enctype="multipart/form-data" multiple>

<input type="checkbox" name="check[]" value="check1" class="checkClass"> Choix 1<br>
<input type="checkbox" name="check[]" value="check2" class="checkClass"> Choix 2<br>
<input type="checkbox" name="check[]" value="check3" class="checkClass"> Choix 3<br>
<input type="checkbox" name="check[]" value="check4" class="checkClass"> Choix 4<br>

<button type="submit">Envoyer</button>

</form>

<!-- Jquery -->
<script>
$(document).ready(function(){

// TOUT COCHER
$(":radio#cocher").click(function(){
$(':checkbox.checkClass').prop('checked', true);
$(":radio#decocher").prop('checked', false);
});
// TOUT DE-COCHER
$(":radio#decocher").click(function(){
$(':checkbox.checkClass').prop('checked', false);
$(":radio#cocher").prop('checked', false);
});
// UNCHECK SI UNE CHECKBOX EST SELECTIONNEE
$(':checkbox.checkClass').click(function(){
$(":radio#cocher").prop('checked', false);
$(":radio#decocher").prop('checked', false);
});


});
</script>

</body>
</html>

Voilà un effet très propre, vos visiteurs pourrons cocher/décocher toutes les checkbox d'un coup ou en sélectionner seulement quelques unes sans que l'option cocher/décocher ne reste bloqué sur une valeur.
J'ai pris soin d'indiquer l'attribut "multiple" dans la balise form pour pouvoir envoyer les valeurs des checkbox sous forme de tableau, si vous ne savez pas traiter ce genre de formulaire, vous trouverez d'excellents tutoriels sur le web.

SNS - Web & Informatique | www.sns.pm | 2013 - 2017