Question

我有一个脚本应该检查表中的所有复选框。它会在第一次检查它们，然后在它之后取消选中它们。但是，当我试图重新检查时，没有任何事情发生。

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/

点击一次后为什么不能正常工作？

Answer 1

您需要使用.prop()代替.attr()

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

演示：Fiddle

Attributes vs. Properties

Answer 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>

Answer 3

这可能对prop（）和attr（）之间的区别很有用。请注意本文.prop() vs .attr()中的这一行：

“属性值反映默认值而不是当前可见状态（除了IE的某些旧版本，因此使事情变得更加困难）。该属性不会告诉您是否选中了页面上的复选框。”< / p>

因此，通常使用prop（）而不是attr（）。

Answer 4

简单的jQuery解决方案，检测表内的已检查输入，以及main（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>example@gmail.com</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>example@gmail.com</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

Answer 5

只要<tbody>中有<table>，找到<td>到壁橱表就行不通了。

它像这样与我合作：

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

Jquery选中表中的所有复选框

5 个答案: