jQuery复选框触发检查其他复选框

Question

我有一个表，它的标题行包含一个复选框，并且在每个正文行中都有复选框。

当用户选中标题复选框时，每个正文复选框也会被选中，如果未选中其中一个正文复选框，则标题复选框将被取消选中。这工作正常，但我现在想添加更多表，这些表链接到第一个表上的每个正文行。

这是一个 html 示例：

<table class="parent-table">
    <thead>
        <tr>
            <th>Title</th>
            <th>
                <input type="checkbox" />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr data-user-id="ID1">
            <td>ID1</td>
            <td>
                <input type="checkbox" />
            </td>
        </tr>

    </tbody>
</table>

<br /><br />

<table class="child-table" id="ID1">
    <thead>
        <tr>
            <th>ID1</th>
            <th>
                <input type="checkbox" />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>One</td>
            <td>
                <input type="checkbox" />
            </td>
        </tr>
        <tr>
            <td>Two</td>
            <td>
                <input type="checkbox" />
            </td>
        </tr>
        <tr>
            <td>Three</td>
            <td>
                <input type="checkbox" />
            </td>
        </tr>
    </tbody>
</table>

所以现在我有一个子表，它的工作方式与原始表相同，但我也希望父表中的行中的复选框与子表中的标题复选框的工作方式相同，所以当所有子表中的复选框被选中，标题复选框和父表中的行中的复选框被选中。

为了进一步增加复杂性，如果选中了“某些”复选框，我最终希望在复选框上使用不确定状态。

这是我到目前为止的 javascript/jQuery... 我认为主要的不工作是当父表中的复选框被自动选中时，如果所有行都没有检查该父表中的标题复选框检查。

/* SEPARATE FROM THE OTHER 'ON CHANGE' CODE BECAUSE THIS IS USED ON ALL TABLES */
$(document).on('change', 'td input[type=checkbox]', function () {
    var ind = $(this).closest("td").index();
    check_checkbox($(this).closest('table'), ind);
});

$('table th input[type=checkbox]').click(function () {
    var checked = $(this).prop('checked');
    var ind = $(this).closest("th").index();
    $(this).closest('table').find('tbody tr').each(function () {
        $(this).find('td:eq(' + ind + ') input[type=checkbox]:not(:disabled)').prop('indeterminate',false).prop('checked', checked).trigger('change');
    });
});

function check_checkbox(table, pos) {
    if (!pos) pos = 0;
    var count = 0;
    var checked = 0;
    table.find("tbody tr").each(function () {
        count = count + $(this).find('td:eq(' + pos + ') input[type=checkbox]:not(:disabled)').length;
        checked = checked + $(this).find('td:eq(' + pos + ') input[type=checkbox]:checked').length;
    });
    table.find('th:eq(' + pos + ') input[type=checkbox]').prop('checked', count == checked && count > 0).prop('indeterminate',false).trigger('change');
}
/* *********************** */



$(document).on('change', '.parent-table td input[type=checkbox]', function() {
    var checkit = $(this).prop('checked');
    var a = $(this).closest('tr').attr('data-user-id');
    $("table#"+a).find("tr").each( function() {
        $(this).find("input[type=checkbox]").prop("checked", checkit);
    });
});

$(document).on('change', '.child-table td input[type=checkbox]', function() {
    var a = $(this).closest('table').attr('id');
    var b = $(this).closest("tbody").find("input[type=checkbox]").length;
    var c = $(this).closest("tbody").find("input[type=checkbox]:checked").length;
    if(b == c) {
        $("table tr[data-user-id="+a+"]").find("input[type=checkbox]").prop("checked", true).prop('indeterminate',false);
    } else if(c == 0) {
        $("table tr[data-user-id="+a+"]").find("input[type=checkbox]").prop("checked", false).prop('indeterminate',false);
    } else {
        $("table tr[data-user-id="+a+"]").find("input[type=checkbox]").prop("checked", true).prop('indeterminate',true);
    }
});

这是一个 jsfiddle...http://jsfiddle.net/5cBTT/

Answer 1

问题在于，在您的 check_checkbox() 函数中，您只是在更新目标表的标题 chkbox。例如，如果您选中子表中的所有框，则您正在更新此表的标题框，而不是主表。你应该做的是，在你的

$(document).on('change', '.child-table td input[type=checkbox]', function() {

添加

check_checkbox($(".parent-table"),$(this).closest("td").index());

每个人的背后

...").prop("checked", ...

这是一个有效的小提琴

http://jsfiddle.net/TCHdevlp/5cBTT/1/

另外，我建议您将复选框与onchange 事件绑定，而不是根据框数计算选中的框。如果有一天，您想在表格中使用分页，则计数只会计算可见的复选框。因此，如果您选中“全选”框，则只会选中当前页面的框。此外，每次您选中一个框时，您都会重新计算页面中的所有框，这可能是一个很大的数字。