选择/取消选择复选框，该复选框未按预期使用.coneast('table'）.find('tbo

Select / deselect check boxes not working as expected using .closest('table').find('tbody > tr')

本文关键字：选择 复选框 table tbo find coneast 取消      更新时间：2024-01-02

我有下面的一个简单表格，并通过单击表格顶部的复选框来选择/取消选择所有复选框。

此外：当我单击第个复选框时，所有其他复选框都将被选中，当我再次单击第个框时，其他所有复选框都被取消选中。

问题是这样的：当所有复选框都被选中，我点击其中一个其他复选框时，它被取消选中，但第th个复选框也应该自动取消选中，这不会发生。

另一方面，当选中其中两个复选框，我点击最后一个复选框时，也应该选中第个复选框。

有人知道我如何在这个特定的代码中做到这一点吗？

这里的javascript：

    // Select / deselect check boxes on free text search page.
    jQuery(function($) {
        // Select / deselect all rows according to table header checkbox.
        var active_class = 'active';
        $('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
            var th_checked = this.checked; // Checkbox inside "TH" table header.

            $(this).closest('table').find('tbody > tr').each(function(){
                    var row = this;
                    if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                    else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
            });
        });

        // Select / deselect a row when the checkbox is checked / unchecked.
        $('#simple-table').on('click', 'td input[type=checkbox]' , function(){
            var $row = $(this).closest('tr');
            if(this.checked) $row.addClass(active_class);
            else $row.removeClass(active_class);
        });
    });

这里是html:

<table id="simple-table" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th class="center">
                <label class="pos-rel">
                    <input class="ace" type="checkbox" />
                        <span class="lbl"></span>
                </label>
            </th>
            <th>Areas:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="center">
                <label class="pos-rel">
                    <input class="ace" name="ma1" type="checkbox" value="1" checked="" />
                    <span class="lbl"></span>
                </label>
            </td>
            <td>
                <span>Option 01</span>
            </td>
        </tr>
        <tr>
            <td class="center">
                <label class="pos-rel">
                    <input class="ace" name="ma2" type="checkbox" value="1" />
                    <span class="lbl"></span>
                </label>
            </td>
            <td>
                <span>Option 02</span>
            </td>
        </tr>
        <tr>
            <td class="center">
                <label class="pos-rel">
                    <input class="ace" name="ma3" type="checkbox" value="1" />
                    <span class="lbl"></span>
                </label>
            </td>
            <td>
                <span>Option 03</span>
            </td>
        </tr>
    </tbody>
</table>

我试过让其他人添加以下代码，但没有任何效果：

            var tr_checked = this.checked; // Checkboxes checked.
            $(this).closest('table').find('tbody > tr').each(function(){
                    var row = this;
                    if(tr_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                    else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
            });

如果你能帮助我使用这种方法使它发挥作用，我将不胜感激。

我会这样做。

var $thead = $('#simple-table thead');
var $tbody = $('#simple-table tbody');
// Event handler for the .ace checkbox inside <thead>.
$thead.find('.ace').change(function() {
    if ($(this).prop("checked")) {
        $tbody.find('.ace').prop("checked", true);
    } else {
        $tbody.find('.ace').prop("checked", false);
    }
});
// Event handler for .ace checkboxes inside <tbody>.
$tbody.on("change", ".ace", function() {
    if ($tbody.find('.ace:checked').length == $tbody.find('.ace').length) {
        $thead.find('.ace').prop("checked", true);
    } else {
        $thead.find('.ace').prop("checked", false);
    }
});

JSFiddle

您的代码似乎正在工作，至少在chrome中是这样。这是一把小提琴如果你想让主复选框按预期工作，我用一个工作示例改变了主意

if(this.checked) {
   $row.addClass(active_class);
   //check if all checkboxes are checked
   if(table.find("tbody input[type=checkbox]:not(:checked)").length                ==0){
       headerCheckbox.prop('checked', true);
    }
 } else {
    $row.removeClass(active_class);
    headerCheckbox.prop('checked', false);
 }
相关文章：