JQuery выберите все флажки в таблице

У меня есть script, который должен проверять все флажки в таблице. Он проверяет их все в первый раз, после этого он отключает их. Однако, когда я пытаюсь перепроверить их, ничего не происходит.

jquery:

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

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>

здесь сценарий поведения:

http://jsfiddle.net/EEJrU/

Почему он не работает после однократного нажатия?

Ответ 1

Вам нужно использовать . prop() вместо . attr ( )

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

Демо: Fiddle

Атрибуты против свойств

Ответ 2

    <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

Это может быть полезно при разнице между prop() и attr(). Обратите внимание на эту строку в этой статье .prop() vs .attr():

"Значение атрибута отражает значение по умолчанию, а не текущее видимое состояние (за исключением некоторых старых версий IE, что делает вещи еще сложнее). Атрибут ничего не говорит о том, установлен ли флажок на странице."

В общем случае используйте prop() вместо attr().

Ответ 4

Простое решение jQuery с обнаружением проверочных входов внутри таблицы и изменение состояния для основного (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));
    })
});

Демо: jsfiddle