Question

一个奇怪的问题，但我遇到了一个很好的选择器来做这件事有些麻烦。 jsfiddle在这里：http://jsfiddle.net/NZf6r/1/

简而言之，我有一个父表，其中有一个＆＃34;选择全部＆＃34;复选框作为thead中的列。每个表格行都有一个复选框。目的是如果他们单击复选框，我选择（或取消选择）tbody中的所有行复选框。简单，对吧？

但是，表中有一行用作每行的子表。这些子表也有复选框，也需要相同的＆＃34;选择所有＆＃34;方案

棘手的部分是没有得到＆＃34;选择全部＆＃34;在父表中也选择子项。我当前的事件函数看起来像这样（也在jsfiddle上）：

$('th input').on('click', function(event) {
    var isChecked = $(event.target).is(':checked');
    $(event.target)
        .parents('table')
        .first()
        .find('input[type="checkbox"]')
        .each(function(i, checkbox) {
            $(checkbox).prop('checked', isChecked);
        });
});

我知道我可以使用直接子选择器（>），但我不太确定合并它的最佳方法。

我也知道我可以在每个表格类型（父与子）的复选框中添加一个类，并将其添加到输入选择器，但我很好奇是否有我可以避免做的方式那。一些jQuery魔法，如果你愿意的话。

以下是粗略的HTML内容（显然不是完整的表），以防您无法访问jsfiddle：

<table>
    <thead>
        <tr>
            <th style="width:20px">
                <div>
                    <input type="checkbox" />
                </div>
            </th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div>
                    <input type="checkbox" />
                </div>
            </td>
            <td>Aaaaa</td>
        </tr>
        <tr>
            <td colspan="2">
                <div style="padding-left: 20px">
                    <table>
                        <thead>
                            <tr>
                                <th>
                                    <div>
                                        <input type="checkbox" />
                                    </div>
                                </th>
                                <th>Bar</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div>
                                        <input type="checkbox" />
                                    </div>
                                </td>
                                <td>Aaaaa</td>
                            </tr>
                        </tbody>
                    </table>                    
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <input type="checkbox" />
                </div>
            </td>
            <td>Bbbbb</td>
        </tr>
        <tr>
            <td colspan="2">
                <div style="padding-left: 20px">
                    <table>
                        <thead>
                            <tr>
                                <th>
                                    <div>
                                        <input type="checkbox" />
                                    </div>
                                </th>
                                <th>Bar</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div>
                                        <input type="checkbox" />
                                    </div>
                                </td>
                                <td>Bbbbb</td>
                            </tr>
                        </tbody>
                    </table>                    
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

请改用此脚本：

$('th input').on('click', function(event){
  var parenttable = $(this).parents('table:first');
  var isChecked = $(event.target).is(':checked');
  parenttable.find(">tbody>tr>td>div>input").prop('checked', isChecked);
});

Answer 2

试试这个demo

$('th input').on('click', function (event) {
    var isChecked = $(event.target).is(':checked');

    $(event.target)
        .closest("table")
        .find('> tbody > tr:not(:has(table)) > td  input[type="checkbox"]')
        .each(function () {
            $(this).prop('checked', isChecked);
    });
});

仅查找父表中的元素，而不查找其单元格中的子表

2 个答案: