Comment cocher/décocher toutes les cases à cocher avec un bouton en utilisant jQuery ?

Question

J'essaie de cocher/décocher toutes les cases à cocher en utilisant jQuery. Maintenant, en cochant/décochant la case parent, toutes les cases enfants sont sélectionnées/désélectionnées et le texte de la case parent est modifié pour cocher/décocher.

Maintenant, je veux remplacer la case à cocher parentale par un bouton de saisie, et changer le texte du bouton pour cocher/décocher. Voici le code, quelqu'un peut-il modifier le code ?

    $( function() {
        $( '.checkAll' ).live( 'change', function() {
            $( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
            $( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
        });
        $( '.cb-element' ).live( 'change', function() {
            $( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );

        });
    });

   <input type="checkbox" class="checkAll" /> <b>Check All</b>

   <input type="checkbox" class="cb-element" /> Checkbox  1
   <input type="checkbox" class="cb-element" /> Checkbox  2
   <input type="checkbox" class="cb-element" /> Checkbox  3

Answer 1

Essayez celui-là :

$(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
        $(this).val('uncheck all');
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})

DEMO

Answer 2

Voici la méthode la plus courte que j'ai trouvée (nécessite jQuery1.6+)

HTML :

<input type="checkbox" id="checkAll"/>

JS :

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

J'utilise .prop car .attr ne fonctionne pas pour les cases à cocher dans jQuery 1.6+, sauf si vous avez explicitement ajouté un attribut checked à votre balise d'entrée.

Exemple -

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>

    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>

Answer 3

Essaie celle-là :

HTML

<input type="checkbox" name="all" id="checkall" />

JavaScript

$('#checkall:checkbox').change(function () {
   if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
   else $('input:checkbox').removeAttr('checked');
});​

DEMO

Answer 4

Html

<input type="checkbox" name="select_all" id="select_all" class="checkAll" />

Javascript

    $('.checkAll').click(function(){
    if($(this).attr('checked')){
        $('input:checkbox').attr('checked',true);
    }
    else{
        $('input:checkbox').attr('checked',false);
    }
});

Answer 5

Solution pour faire basculer des cases à cocher à l'aide d'un bouton, compatible avec jQuery 1.9+ où toogle-event n'est plus disponible :

$('.check:button').click(function(){
      var checked = !$(this).data('checked');
      $('input:checkbox').prop('checked', checked);
      $(this).val(checked ? 'uncheck all' : 'check all' )
      $(this).data('checked', checked);
});

DEMO