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>

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

为了增加更高级别的复杂性，我最终希望在复选框上使用不确定状态，如果有些＆＃39;选中复选框。

这是我到目前为止的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事件绑定复选框，而不是将复选框与计数框计数。如果有一天，您希望在表格中使用分页，则计数将仅计算可见的复选框。所以，如果你检查＆＃34;检查所有＆＃34;框中，仅检查当前页面的框。此外，每次检查一个方框时，您都会重新计算页面的所有方框，这可能是一个很大的数字。

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

1 个答案: