Question

我需要使用复选框在HTML表格中使用CSS或javascript显示/隐藏多个相关列。例如，如果选中“Beer”复选框，我需要显示与Beer相关的所有三列，如果未选中则隐藏所有三列。

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

Answer 1

如果您可以添加属性，请尝试以下方法：

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

Answer 2

这是一个简单的jQuery解决方案，我将每个复选框从0开始编入索引，

＆＃13;

$(document).ready(function(){
      $('input').on('change',function(){
          var id = $(this).data('id')
          
          if ($(this).prop('checked'))
            $('table tr').each(function(i,v){
                $(v).find('td').eq(id).show();
                $(v).find('th').eq(id).show();
            })
          else
             $('table tr').each(function(i,v){
                $(v).find('td').eq(id).hide();
                $(v).find('th').eq(id).hide();
            })

      })
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="check1" type="checkbox" data-id="0" checked>
    <label for="check1">Beer</label>

    <input id="check2" type="checkbox" data-id="1" checked>
    <label for="check2">Wine</label>

    <input id="check3" type="checkbox" data-id="2" checked>
    <label for="check3">Vodka</label>
    
    <table>
        <tr>
            <th>Beer</th>
            <th>Wine</th>
            <th>Vodka</th>
        </tr>
        <tr>
            <td>20</td>
            <td>12</td>
            <td>22</td>
        </tr>
        <tr>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
    </table>

＆＃13;

在Javascript中显示/隐藏多个表列

2 个答案: