Javascript-隐藏列的复选框

Javascript - Checkboxes to hide columns

本文关键字：复选框 隐藏 Javascript-      更新时间：2024-01-10

我遇到了一些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();

})；

这是一把小提琴。任何帮助都将不胜感激。

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

感谢

当您调用$(this).parent().index()+1 bea时，表行出现问题，因为<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例子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例子2

如果你不介意这一页的风格，我建议你先看一下。如果不是，第二个是更动态的

同意@joac omf
因为<chekcbox>是<td>标签的子代。它们不是兄弟，所以索引不正确。

索引是"不正确的"，因为您将复选框拆分为两个表行
将复选框放在一行<tr>中，它们就能正常工作。

<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>

https://jsfiddle.net/o6e3pc3a/8/

相关文章：