选中相应列中的所有复选框

Question

如果没有class或id，如何检查同一列中的所有复选框？我有以下表格的屏幕截图，HTML和jquery代码：

截图

请注意，我使用rowspan和colspan会影响到什么吗？

HTML代码

当我点击阅读复选框时，将检查相同的列。但是当我点击“创建”列时，它仍会触发“读取”列的复选框。

<table class="table table-bordered" id="table_perm">
    <thead>
        <tr>
            <th rowspan="2">Modules (Page)</th>
            <th colspan="4">Permissions</th>
        </tr>
        <tr>
            <th>Read <p><input type="checkbox" class="big-checkbox"></p></th>
            <th>Create <p><input type="checkbox" class="big-checkbox"></p></th>
            <th>Edit <p><input type="checkbox" class="big-checkbox"></p></th>
            <th>Delete <p><input type="checkbox" class="big-checkbox"></p></th>
        </tr>
    </thead>
    <tbody>
        <tr data-id="1">
        <td>Page 1</td>
        <td><input type="checkbox" class="big-checkbox" value="r"></td>
        <td><input type="checkbox" class="big-checkbox" value="c"></td>
        <td><input type="checkbox" class="big-checkbox" value="e"></td>
        <td><input type="checkbox" class="big-checkbox" value="d"></td>
    </tr><tr data-id="6">
        <td>Page 2</td>
        <td><input type="checkbox" class="big-checkbox" value="r"></td>
        <td><input type="checkbox" class="big-checkbox" value="c"></td>
        <td><input type="checkbox" class="big-checkbox" value="e"></td>
        <td><input type="checkbox" class="big-checkbox" value="d"></td>
    </tr>
    </tbody>
</table>

jQuery代码

$("th p input[type='checkbox']").on("change", function() {
    var cb = $(this),          //checkbox that was changed
       th = cb.parent(),      //get parent th
       col = th.index() + 2;  //get column index. note nth-child starts at 1, not zero

    $("tbody td:nth-child(" + col + ") input").prop("checked", this.checked);  //select the inputs and [un]check it
});

Answer 1

.parent()指向p，而不是th所以......

使用.closest("th") 获取最接近的th

$("th input[type='checkbox']").on("change", function() {
    var $cb = $(this),         
        $th = $cb.closest("th"), // get parent th
        col = $th.index() + 2;  // get column index. note nth-child starts at 1, not zero
    $("tbody td:nth-child(" + col + ") input").prop("checked", this.checked);  //select the inputs and [un]check it
});

<table class="table table-bordered" id="table_perm">
    <thead>
        <tr>
            <th rowspan="2">Modules (Page)</th>
            <th colspan="4">Permissions</th>
        </tr>
        <tr>
            <th>Read <p><input type="checkbox" class="big-checkbox"></p></th>
            <th>Create <p><input type="checkbox" class="big-checkbox"></p></th>
            <th>Edit <p><input type="checkbox" class="big-checkbox"></p></th>
            <th>Delete <p><input type="checkbox" class="big-checkbox"></p></th>
        </tr>
    </thead>
    <tbody>
        <tr data-id="1">
        <td>Page 1</td>
        <td><input type="checkbox" class="big-checkbox" value="r"></td>
        <td><input type="checkbox" class="big-checkbox" value="c"></td>
        <td><input type="checkbox" class="big-checkbox" value="e"></td>
        <td><input type="checkbox" class="big-checkbox" value="d"></td>
    </tr><tr data-id="6">
        <td>Page 2</td>
        <td><input type="checkbox" class="big-checkbox" value="r"></td>
        <td><input type="checkbox" class="big-checkbox" value="c"></td>
        <td><input type="checkbox" class="big-checkbox" value="e"></td>
        <td><input type="checkbox" class="big-checkbox" value="d"></td>
    </tr>
    </tbody>
</table>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

你仍然缺少的是：

  

如果选择超级复选框 - 但取消选中其中一个列复选框→也应取消选中超级复选框。

但竖起大拇指！