Question

我想基于复选框隐藏表格中的列。

此处应隐藏第2列，因为未选中复选框“col 2”。

[v] col 1   [ ] col 2   [v] col3

+-------------------------------+
|       | col 1 | col 2 | col 3 |
| row 1 |  aaa  | bbb   | ccc   |
| row 2 |  ddd  | eee   | fff   |
+-------------------------------+

目前我有一个带有复选框的div容器，然后与此div相邻，即表格。

为了使事情变得更复杂，复选框是“按钮复选框”，类似于：https://stackoverflow.com/a/7642302

<div class="filter_group">
    <div class="check_button">
        <label>
            <input type="checkbox" data-filter-col="d1"><span>col 1</span>
        </label>
    </div>
    <div class="check_button">
        <label>
            <input type="checkbox" data-filter-col="d2"><span>col 2</span>
        </label>
    </div>
    <div class="check_button">
        <label>
            <input type="checkbox" data-filter-col="d3"><span>col 3</span>
        </label>
    </div>
</div>
<table>
    <tr>
        <td> </td>
        <th data-col="d1">col 1</th>
        <th data-col="d2">col 2</th>
        <th data-col="d3">col 3</th>
    </tr>
    <tr>
        <th>row 1</th>
        <td data-col="d1">aaa</td>
        <td data-col="d2">bbb</td>
        <td data-col="d3">ccc</td>
    </tr>
</table>

（此处示例代码中只有一个数据行，真实表有多个。）

从我发现的，在这个网站和其他地方，如果我正确理解各种选择器，这是一个渺茫的希望 - 但是可以使用后代或儿童组合器与一般或相邻组合器结合使用？方向：

 .filter_group .check_button label input[data-filter-col="d1"]:checked ~
 table td[data-col="d1"] {
     display: none;
 }

如果没有，有没有办法用CSS做这个，而不会使结构太复杂？

我可以并且正在使用JavaScript执行此操作，但尝试使用CSS解决此问题。

Answer 1

由于CSS选择器（包括CSS级别3和4）仅在树中（包括后代，子级和年幼的兄弟姐妹），为了使此解决方案起作用，您需要复选框触发器生活在同一级别或DOM的级别高于table。

如果执行此操作，您可以将标签设置为显示为按钮，并在其关联的复选框处于活动状态时使其处于激活状态。然后，您可以将display: none;添加到复选框。

但是，要回答您的具体问题，保持复选框不变，您可以将标签附加到顶级复选框，并在标签中添加两个复选框（一个处于活动状态，一个处于非活动状态）。您可以在顶部的复选框上附加id标签，并使用for上具有相同值的label属性。

<input class="trigger" id="col1" type="checkbox">
<input class="trigger" id="col2" type="checkbox">
<input class="trigger" id="col3" type="checkbox">

<div class="filter_group">
    <div class="check_button">
        <label for="col1">
            <input type="checkbox" data-filter-col="d1"><input type="checkbox" data-filter-col="d1" checked><span>col 1</span>
        </label>
    </div>
    <div class="check_button">
        <label for="col2">
            <input type="checkbox" data-filter-col="d2"><input type="checkbox" data-filter-col="d2" checked><span>col 2</span>
        </label>
    </div>
    <div class="check_button">
        <label for="col3">
            <input type="checkbox" data-filter-col="d3"><input type="checkbox" data-filter-col="d3" checked><span>col 3</span>
        </label>
    </div>
</div>
<table>
    <tr>
        <td> </td>
        <th data-col="d1">col 1</th>
        <th data-col="d2">col 2</th>
        <th data-col="d3">col 3</th>
    </tr>
    <tr>
        <th>row 1</th>
        <td data-col="d1">aaa</td>
        <td data-col="d2">bbb</td>
        <td data-col="d3">ccc</td>
    </tr>
</table>

然后，这是启用所有内容的CSS：

.trigger {
  /* display: none; // You would probably use this. */
  opacity: .2; /* This is to show how the wiring works. */
}

/* Default the inputs to not displaying */
.filter_group input {
  display: none;
}

/* Show and hide inline checkboxes */
#col1:not(:checked) ~ .filter_group label[for=col1] input:not(:checked),
#col2:not(:checked) ~ .filter_group label[for=col2] input:not(:checked),
#col3:not(:checked) ~ .filter_group label[for=col3] input:not(:checked){
 display: inline-block; 
}

#col1:checked ~ .filter_group label[for=col1] input:checked,
#col2:checked ~ .filter_group label[for=col2] input:checked,
#col3:checked ~ .filter_group label[for=col3] input:checked{
 display: inline-block; 
}

/* Do filters */
#col1:not(:checked) ~ * *[data-col="d1"],
#col2:not(:checked) ~ * *[data-col="d2"],
#col3:not(:checked) ~ * *[data-col="d3"] {
  display: none;
}

/* Avoid clicks on the inactive checkboxes */
label input {
  pointer-events: none;
}

以下是行动中的代码：https://codepen.io/anon/pen/xWveoz

你提到“有没有办法用CSS做这个，而不会使结构太复杂？”

我认为这有点矫枉过正。我认为更简洁的策略是直接设置label元素的样式，这会删除两个非语义复选框。但是，如果复杂性对你有用，那么这个解决方案应该只有CSS。

使用复选框

1 个答案: