jquery - 使用 jquery 隐藏/显示表格 CSS 的行

Question

我有以下代码，旨在根据复选框隐藏/显示表格的特定行:

$(document).ready(function(){
    $("#activate").click(function(){ 
    if ($("#activate").prop('checked')){
        $(".hidden").css("display","");
        } else {
        $(".hidden").css("display","none");      
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="activate" checked>
See all rows
<br>
<br>
<table>
  <tr>
    <th>Columna 1</th>
    <th>Columna 2</th>
    <th>Columna 3</th>
  </tr>
  <tr>
    <td>Data1</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr class="hidden">
    <td>Data2</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data3</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr class="hidden">
    <td>Data4</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

当我想首先显示所有行时这很好用，但当我试图首先只显示特定行时(这正是我需要的)。

我尝试使用 toggleClass() 方法，但代码只工作了一次，我可以使用 jquery 的其他选项吗？

Answer 1

你可以在 .trigger('click') 上链接:

$(document).ready(function(){
    $("#activate").click(function(){ 
    if ($("#activate").prop('checked')){
        $(".hidden").css("display","");
        } else {
        $(".hidden").css("display","none");      
        }
    }).trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="activate" checked>
See all rows
<br>
<br>
<table>
  <tr>
    <th>Columna 1</th>
    <th>Columna 2</th>
    <th>Columna 3</th>
  </tr>
  <tr>
    <td>Data1</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr class="hidden">
    <td>Data2</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data3</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr class="hidden">
    <td>Data4</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>