web-dev-qa-db-fra.com

JQuery sélectionne toutes les cases du tableau

J'ai un script qui devrait cocher toutes les cases d'un tableau. Il les vérifie tous la première fois, il les décoche ensuite. Cependant, lorsque j'essaie de les revérifier, rien ne se passe.

le jquery:

$('#selectAll').click(function(e){
    var table= $(e.target).closest('table');
    $('td input:checkbox',table).attr('checked',e.target.checked);
});

le HTML:

<table>
    <tr>
        <th>
            <input type="checkbox" id="selectAll" />
        </th>
        <th>
            hi!
        </th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="1"/>
        </td>
        <td>
            hi!
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="2"/>
        </td>
        <td>
            hi!
        </td>
    </tr>
</table>

voici un violon du comportement:

http://jsfiddle.net/EEJrU/

Pourquoi ne fonctionne-t-il pas après avoir été cliqué une fois?

jquerycheckbox
18
Snowburnt

Vous devez utiliser .prop () au lieu de .attr ()

$('#selectAll').click(function(e){
    var table= $(e.target).closest('table');
    $('td input:checkbox',table).prop('checked',this.checked);
});

Démo: Fiddle

Attributs vs. Propriétés

72
Arun P Johny
    <HTML>
    <HEAD>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    </HEAD>
    <BODY>

    <table border="1">
    <tr>
        <th><input type="checkbox" id="selectall"/></th>
        <th>Cell phone</th>
        <th>Rating</th>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
        <td>BlackBerry Bold 9650</td>
        <td>2/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
        <td>Samsung Galaxy</td>
        <td>3.5/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
        <td>Droid X</td>
        <td>4.5/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
        <td>HTC Desire</td>
        <td>3/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
        <td>Apple iPhone 4</td>
        <td>5/5</td>
    </tr>
    </table>

    </BODY>
    </HTML>




<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            oTable = $('#datatable').dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"
            });

            $("#selectall").click(function () {
                var checkAll = $("#selectall").prop('checked');
                    if (checkAll) {
                        $(".case").prop("checked", true);
                    } else {
                        $(".case").prop("checked", false);
                    }
                });

            $(".case").click(function(){
                if($(".case").length == $(".case:checked").length) {
                    $("#selectall").prop("checked", true);
                } else {
                    $("#selectall").prop("checked", false);
                }

            });
        } );




    </script>
3
The Java Guy

Cela pourrait être utile sur la différence entre prop () et attr (). Notez cette ligne dans cet article .prop () vs .attr () :

"La valeur de l'attribut reflète l'état par défaut plutôt que l'état visible actuel (sauf dans certaines versions plus anciennes d'IE, rendant ainsi les choses encore plus difficiles). L'attribut ne vous dit pas si la case à cocher de la page est cochée"

Donc, en général, utilisez prop () au lieu de attr ().

1
shenge86

Solution jQuery simple, avec détection des entrées vérifiées à l'intérieur du tableau et changement d'état de la case principale (selectAll):

<table class="table">
    <thead>
        <tr>
            <th>
                <div class="checkbox">
                    <input type="checkbox" id="selectAll">
                    <label for="selectAll"></label>
                </div>
            </th>
            <th>Email</th>
            <th>Join date <i class="arrow bottom"></i></th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>
                <div class="checkbox">
                    <input type="checkbox" id="tr-checkbox1">
                    <label for="tr-checkbox1"></label>
                </div>
            </td>
            <td>[email protected]</td>
            <td>21 Oct, 2016 at 11:29 pm</td>
        </tr>
        <tr>
            <td>
                <div class="checkbox">
                    <input type="checkbox" id="tr-checkbox2">
                    <label for="tr-checkbox2"></label>
                </div>
            </td>
            <td>[email protected]</td>
            <td>21 Oct, 2016 at 11:29 pm</td>
        </tr>
    </tbody>
</table>    

$(document).ready(function() {
    var $selectAll = $('#selectAll'); // main checkbox inside table thead
    var $table = $('.table'); // table selector 
    var $tdCheckbox = $table.find('tbody input:checkbox'); // checboxes inside table body
    var $tdCheckboxChecked = []; // checked checbox arr

    //Select or deselect all checkboxes on main checkbox change
    $selectAll.on('click', function () {
        $tdCheckbox.prop('checked', this.checked);
    });

    //Switch main checkbox state to checked when all checkboxes inside tbody tag is checked
    $tdCheckbox.on('change', function(){
        $tdCheckboxChecked = $table.find('tbody input:checkbox:checked');//Collect all checked checkboxes from tbody tag
        //if length of already checked checkboxes inside tbody tag is the same as all tbody checkboxes length, then set property of main checkbox to "true", else set to "false"
        $selectAll.prop('checked', ($tdCheckboxChecked.length == $tdCheckbox.length));
    })
});

Démo: jsfiddle

1
ykosinets

Juste au cas où il y aurait <tbody> dans le <table>, la recherche de <td> dans la table de placard ne fonctionnera pas. 

Cela a fonctionné avec moi comme ça: 

$(document).ready(function() {
    $('#selectAll').click(function(e){        
        $(this).closest('tbody').find('td input:checkbox').prop('checked', this.checked);
    });
});
0
Aashis Binod Khanal