ToutSurTout.biz
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
        }         
               
    });

});