Question

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

复选框位于表格中。该表有多行。例如：

1, 2
3, 4

这些复选框对应于另一个维护中的列。这个维护是一个单行。例如：1,2,3,4

当我取消选中方框1＆amp;从表中2，它隐藏了第1行和第1行。 2从主表。但如果我取消选中方框3＆amp; 4，它还隐藏了第1行和第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/

由于

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

的示例

如果您不介意页面的样式，我建议先使用。如果没有，第二个更动态

Answer 2

索引不正确＆＃39;因为您将复选框拆分为两个表格行将复选框放在一行<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/

Answer 3

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

Javascript - 用于隐藏列的复选框

3 个答案: