我需要在使用复选框的 HTML 表格中仅使用 CSS 或 javascript 来显示/隐藏多个相关列。例如，如果选中“啤酒”复选框，我需要显示与啤酒相关的所有三列，如果未选中，则隐藏所有三列。
<html>
Show: <input type="checkbox">Beer</input>
<input type="checkbox">Wine</input>
<input type="checkbox">Vodka</input>
<input type="checkbox">Whiskey</input>
<table>
<tr>
<th>BeerCol1</th>
<th>BeerCol2</th>
<th>BeerCol3</th>
<th>WineCol1</th>
<th>WineCol2</th>
<th>WineCol3</th>
<th>VodkaCol1</th>
<th>VodkaCol2</th>
<th>VodcaCol3</th>
<th>WhiskeyCol1</th>
<th>WhiskeyCol2</th>
<th>WhiskeyCol3</th>
</tr>
<tr>
<td>Beer Value 1</td>
<td>Beer Value 2</td>
<td>Beer Value 3</td>
<td>Wine Value 1</td>
<td>Wine Value 2</td>
<td>Wine Value 3</td>
<td>Vodka Value 1</td>
<td>Vodka Value 2</td>
<td>Vodka Value 3</td>
<td>Whiskey Value 1</td>
<td>Whiskey Value 2</td>
<td>Whiskey Value 3</td>
</tr>
<tr>
<td>Beer Value 4</td>
<td>Beer Value 5</td>
<td>Beer Value 6</td>
<td>Wine Value 4</td>
<td>Wine Value 5</td>
<td>Wine Value 6</td>
<td>Vodka Value 4</td>
<td>Vodka Value 5</td>
<td>Vodka Value 6</td>
<td>Whiskey Value 4</td>
<td>Whiskey Value 5</td>
<td>Whiskey Value 6</td>
</tr>
</table>
</html>
最佳答案
如果你可以添加属性，试试这个:
#beer:checked ~ table .beer,
#whiskey:checked ~ table .whiskey,
#wine:checked ~ table .wine,
#vodka:checked ~ table .vodka {
visibility: visible;
}
th, td {
visibility: hidden;
}Show:
<input id="beer" name="beer" type="checkbox"/>
<label for="beer">Beer</label>
<input id="wine" name="wine" type="checkbox"/>
<label for="wine">Wine</label>
<input id="vodka" name="vodka" type="checkbox"/>
<label for="vodka">Vodka</label>
<input id="whiskey" name="whiskey" type="checkbox"/>
<label for="whiskey">Whiskey</label>
<table>
<tr>
<th class="beer">BeerCol1</th>
<th class="beer">BeerCol2</th>
<th class="beer">BeerCol3</th>
<th class="wine">WineCol1</th>
<th class="wine">WineCol2</th>
<th class="wine">WineCol3</th>
<th class="vodka">VodkaCol1</th>
<th class="vodka">VodkaCol2</th>
<th class="vodka">VodcaCol3</th>
<th class="whiskey">WhiskeyCol1</th>
<th class="whiskey">WhiskeyCol2</th>
<th class="whiskey">WhiskeyCol3</th>
</tr>
<tr>
<td class="beer">Beer Value 1</td>
<td class="beer">Beer Value 2</td>
<td class="beer">Beer Value 3</td>
<td class="wine">Wine Value 1</td>
<td class="wine">Wine Value 2</td>
<td class="wine">Wine Value 3</td>
<td class="vodka">Vodka Value 1</td>
<td class="vodka">Vodka Value 2</td>
<td class="vodka">Vodka Value 3</td>
<td class="whiskey">Whiskey Value 1</td>
<td class="whiskey">Whiskey Value 2</td>
<td class="whiskey">Whiskey Value 3</td>
</tr>
<tr>
<td class="beer">Beer Value 4</td>
<td class="beer">Beer Value 5</td>
<td class="beer">Beer Value 6</td>
<td class="wine">Wine Value 4</td>
<td class="wine">Wine Value 5</td>
<td class="wine">Wine Value 6</td>
<td class="vodka">Vodka Value 4</td>
<td class="vodka">Vodka Value 5</td>
<td class="vodka">Vodka Value 6</td>
<td class="wine">Whiskey Value 4</td>
<td class="wine">Whiskey Value 5</td>
<td class="wine">Whiskey Value 6</td>
</tr>
</table>关于javascript - 在 Javascript 中显示/隐藏多个表列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48965152/