comment vérifier et décochez toutes les cases à cocher dans un tableau html avec cochant/décochant une case à cocher?

J'ai une table, avec des lignes, chaque ligne a une case à cocher, et il est l'un des principaux case à l' thead. Mon code:

<table border="1">
    <thead>
        <tr>
            <th><input type="checkbox" id="allcb" name="allcb"/></th>
            <th>values</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" id="cb1" name="cb1"/></td>
            <td>value1</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb2" name="cb2"/></td>
            <td>value2</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb3" name="cb3"/></td>
            <td>value3</td>
        </tr>
    </tbody>
</table>

(aussi essayer ici)

Quelqu'un pourrait-il m'aider, comment faire si je vérifier le principal case à cocher en haut, toutes les cases sont cochées, si je décochez la main, toutes les cases à cocher ne pas être cochée.
Merci si vous m'aidez!

OriginalL'auteur victorio | 2013-07-23

  1. 14

    De Travail Démo http://jsfiddle.net/xYAfj/2/

    $('#allcb').change(function(){
    if($(this).prop('checked')){
        $('tbody tr td input[type="checkbox"]').each(function(){
            $(this).prop('checked', true);
        });
    }else{
        $('tbody tr td input[type="checkbox"]').each(function(){
            $(this).prop('checked', false);
        });
    }
});

    Plus Court Code

    De Travail Démo http://jsfiddle.net/cse_tushar/4tss8/

    $('#allcb').change(function () {
    $('tbody tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

    OriginalL'auteur Tushar Gupta - curioustushar

  2. 3
    $(function(){
       $("#allcb").click(function() {
       var chkBoxes = $("input[id^=cb]");
       chkBoxes.prop("checked", !chkBoxes.prop("checked"));
   }); 
});

    http://jsfiddle.net/7f7Kz/2/

    OriginalL'auteur Prashanth Thurairatnam

  3. 1

    J'ai fait une petite modification sur votre code HTML en changeant les noms des cases à cocher dans le corps de table de cbn à cb[] (mieux pour les opérations de serveur). J'ai également pris en compte le fait que le principal case à cocher état peut être modifié en cliquant sur une autre case à cocher: si l'utilisateur sélectionne manuellement toutes les autres cases à cocher, puis les principaux case doit refléter; aussi, si l'utilisateur supprime une ligne après avoir cliqué sur le principal de la case à cocher toutes les autres, le principal case doit obtenir décochée.

    Vous pouvez le voir il y travaillant : https://jsfiddle.net/h6tgj02p/

    <table border="1">
    <thead>
        <tr>
            <th><input type="checkbox" id="allcb" name="allcb"/></th>
            <th>values</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" id="cb1" name="cb[]"/></td>
            <td>value1</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb2" name="cb[]"/></td>
            <td>value2</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb3" name="cb[]"/></td>
            <td>value3</td>
        </tr>
    </tbody>
</table>

<script  type="text/javascript">
$(document).ready(function() {

    /*
    * Click on select all checkbox
    */
    $('#allcb').click(function(e) {
        $('[name="cb[]"]').prop('checked', this.checked);
    });

    /*
    * Click on another checkbox can affect the select all checkbox
    */
    $('[name="cb[]"]').click(function(e) {
        if ($('[name="cb[]"]:checked').length == $('[name="cb[]"]').length || !this.checked)
            $('#allcb').prop('checked', this.checked);
    });

});

</script>

    OriginalL'auteur Sylvain L. Kamdem