Question

我有以下简单表，并通过单击表格顶部的复选框设法选中/取消选中所有复选框。

另外：当我单击复选框时，会选中所有其他复选框，当我再次单击该复选框时，将取消选中所有其他复选框。

问题是：当选中所有复选框并单击其中一个其他复选框时，将取消选中该复选框，但是应该自动取消选中该复选框，不会发生什么。< / p>

另一方面，当选中2个复选框并点击最后一个复选框时，也应该选中该复选框，也不会发生这种情况。

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

这里是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);

            });

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

Answer 1

我会这样做。

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

Answer 2

您的代码似乎正在运行，至少在Chrome中。 Here is a jsfiddle 如果您希望master复选框按预期工作，我使用working example

更改了小提琴

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);
 }

使用.closest（'table'）选择/取消选中不按预期工作的复选框.find（'tbody＆gt; tr'）

2 个答案: