Annonce ToutSurTout

Bienvenue sur toutsurtout.biz

Radio TST

Si vous souhaitez participer vous aussi aux discussions sur le forum, il faut vous inscrire ou vous identifier.

Le Thème TST Printemps est maintenant en place.

Les inscriptions sont actuellement OUVERTES.

Message 1 Discussion postée le 06-05-2016 à 11:49:32

Loic
Avatar de Loic


Titre: Administrateur d'élite
Avancement: Niveau 5
Lieu: Avec Solenne
Date d'inscription: 26-09-2009
Messages: 104 680
Site web

Cocher tout / tout décocher d'une checkbox avec du jQuery

Si vous avez plusieurs cases à cocher à la suite, il peut être intéressant de proposer au visiteur de les cocher toutes en un clic et de les décocher de la même façon.

voici donc quelques checkbox, et au dessus une case cocher tout dont le texte est entouré d'un span que l'on mettra à jour cocher/décocher.

<input type='checkbox' id='cocheTout'/>
<span id='cocheText'>Cocher tout</span>

<ul id='cases'>
    <li><input type='checkbox' id='1'/>Case 1</li>
    <li><input type='checkbox' id='2'/>Case 2</li>
    <li><input type='checkbox' id='3'/>Case 3</li>
</ul>

N'oubliez pas d'inclure le fichier jQuery.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Et maintenant le code jQuery.

$(document).ready(function() {
    $('#cocheTout').click(function() { // clic sur la case cocher/decocher
           
        var cases = $("#cases").find(':checkbox'); // on cherche les checkbox qui dépendent de la liste 'cases'
        if(this.checked){ // si 'cocheTout' est coché
            cases.attr('checked', true); // on coche les cases
            $('#cocheText').html('Tout decocher'); // mise à jour du texte de cocheText
        }else{ // si on décoche 'cocheTout'
            cases.attr('checked', false);// on coche les cases
            $('#cocheText').html('Cocher tout');// mise à jour du texte de cocheText
        }         
               
    });

});


http://www.toutsurtout.biz/img/UserBarTST.gif
http://www.toutsurtout.biz/img/Sign-Loic.gif
Loic DL un jour, Loic DL toujours ...