javascript - 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() 函数中，您仅更新目标表的 header chkbox。例如，如果您选中子表中的所有框，则您将更新该表的标题框，但不会更新主表的标题框。你应该做的是，在你的

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

添加

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

每个后面

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

这是一个工作 fiddle

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

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