Javascript - 隐藏列的复选框

Question

我遇到了一些 JS 代码的问题，这些代码会根据复选框的状态隐藏列，我希望得到一些帮助。

复选框在表格中。该表有多个行。例如:

1, 2
3, 4

那些复选框对应于另一个主表中的列。该维护表是跨行的。例如:1、2、3、4

当我取消选中表中的框 1 和 2 时，它会隐藏主表中的第 1 行和第 2 行。但是，如果我取消选中框 3 和 4，它还会隐藏第 1 行和第 2 行。

如果表中的复选框位于一行中，则它们会按预期隐藏所有列。但是因为它们是通过表行分解的，所以有一个问题。

$(function() {
$("#checkboxes input[type=checkbox]").on("change", function(e) {
    var id = $(this).parent().index()+1,
        col = $("#table tr th:nth-child("+id+"), #table tr td:nth-child("+id+")");
    $(this).is(":checked") ? col.show() : col.hide();
}).prop("checked", true).change();

});

这是一个 fiddle 。任何帮助将不胜感激。

https://jsfiddle.net/o6e3pc3a/7/

谢谢

Answer 1

调用 $(this).parent().index()+1 时表格行有问题因为你有 <td>标记在两行中，这意味着它将返回 <tr> 内的位置在每一个新的<tr>计数再次从 1 开始。

您有两种解决方案:

1- 您可以将所有复选框放在一行中:

<tr>
    <td><input type="checkbox" name="option1" value="eventid" />Name</td>
    <td><input type="checkbox" name="option2" value="groupid" />ID</td>
    <td><input type="checkbox" name="option3" value="pathfile" />Type</td>
    <td><input type="checkbox" name="option4" value="filesize" />Number</td>
</tr>

这是一个例子 JS Fiddle Example 1

2- 或者你可以只添加一个属性 data-id列位置的值:

<tr>
    <td><input type="checkbox" data-id="1" name="option1" value="eventid" />Name</td>
    <td><input type="checkbox" data-id="2" name="option2" value="groupid" />ID</td>
</tr>
<tr>
    <td><input type="checkbox" data-id="3" name="option3" value="pathfile" />Type</td>
    <td><input type="checkbox" data-id="4" name="option4" value="filesize" />Number</td>
</tr>

然后在js中捕获它:

$(function() {
    $("#checkboxes input[type=checkbox]").on("change", function(e) {
        var id = $(this).attr('data-id'),
            col = $("#table tr th:nth-child("+id+"), #table tr td:nth-child("+id+")");
        $(this).is(":checked") ? col.show() : col.hide();
    }).prop("checked", true).change();   
});

这是一个例子 JS Fiddle Example 2

如果您不介意页面的样式，我推荐第一个。如果不是，第二个更动态