javascript - 使用复选框隐藏表格行

This question already has answers here:

jQuery id selector works only for the first element
                                
                                    （7个答案）
                                
                        
                                2年前关闭。
            
                    
勾选复选框时，我试图隐藏表格行。我设法使其正常工作，但它只会隐藏id的第一个实例。有人可以指导我更改js，这样它将隐藏所有具有匹配ID的代码。

JSFIDDLE

 $(document).ready(function() {
   $('#checkbox1').change(function() {
     if (!this.checked)

       $('#tierPoints').fadeIn('slow');
     else
       $('#tierPoints').fadeOut('slow');
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td colspan=2>
      <input type="checkbox" id="checkbox1">Show/Hide</td>
  </tr>
  <!-- End Of Row -->

  <tr id="tierPoints">
    <td>71</td>
    <td>1000</td>
  </tr>
  <!-- End Of Row -->

  <tr id="tierPoints">
    <td>73</td>
    <td>2000</td>
  </tr>
  <!-- End Of Row -->

  <tr id="tierPoints">
    <td>75</td>
    <td>3000</td>
  </tr>
  <!-- End Of Row -->

</table>

最佳答案

您需要使用“类”选择器而不是ID选择器，并且ID必须唯一。您可以有多个具有相同类名的元素。

     $(document).ready(function() {
       $('#checkbox1').change(function() {
         if (!this.checked)

           $('.tierPoints').fadeIn('slow');
         else
           $('.tierPoints').fadeOut('slow');
       });
     });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
      <tr>
        <td colspan=2>
          <input type="checkbox" id="checkbox1">Show/Hide</td>
      </tr>
      <!-- End Of Row -->

      <tr class="tierPoints">
        <td>71</td>
        <td>1000</td>
      </tr>
      <!-- End Of Row -->

      <tr class="tierPoints">
        <td>73</td>
        <td>2000</td>
      </tr>
      <!-- End Of Row -->

      <tr class="tierPoints">
        <td>75</td>
        <td>3000</td>
      </tr>
      <!-- End Of Row -->

    </table>