使用.closest（'table'）選擇/取消選中不按預期工作的復選框.find（'tbody> tr'）

Question

我有以下簡單的表，並通過單擊表頭中的復選框設法選擇/取消選中所有復選框。

另外：當我單擊復選框時，會選中所有其他復選框，當我再次單擊該復選框時，將取消選中所有其他復選框。

問題是這樣的：當選中所有復選框並單擊其中一個其他復選框時，將取消選中它，但是應該自動取消選中該復選框，不會發生什么。

另一方面，當選中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中。 這是一個jsfiddle如果你想讓master復選框按預期工作，我用一個工作示例改變了小提琴

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