Tabellenzeilen mit Kontrollkästchen ausblenden

Question

Ich versuche, Tabellenzeilen auszublenden, wenn ein Kontrollkästchen aktiviert ist. Ich habe es geschafft zu arbeiten, aber es wird nur die erste Instanz der ID verstecken. Könnte jemand mich dazu bringen, die js so zu ändern, dass sie alle mit passender ID verstecken.

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>

Answer 1

Sie benötigen die "Klasse" Selektor statt ID Selector und die ID muss verwenden eindeutig sein. Sie können mehrere Elemente mit demselben Klassennamen haben.

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

Answer 2

Sie benötigen einzigartige ids haben. Verwenden Sie classes in diesem Fall:

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

Answer 3

In HTML, eine ID eindeutig sein. Weitere Informationen finden Sie unter www.w3.org....

Versuchen Sie, id="tiersPoints" zu class="tiersPoints" zu ändern.

Answer 4

Eine ID sollte innerhalb Ihrer Seite eindeutig sein.

<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="tierPoints1"> 
 
    <td>71</td> 
 
    <td>1000</td> 
 
    </tr> 
 
    <!-- End Of Row --> 
 

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

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

 
</table>

Answer 5

Hier Lösung:

Wie ich in Kommentar erwähnt: Sie müssen tierPoints Klasse. Sie können nicht mehr tr mit derselben ID

$(document).ready(function() { 
 
    $('#checkbox1').change(function() { 
 
     if (!this.checked) 
 
     
 
     $('.tierPoints').fadeIn('slow'); 
 
     else 
 
     $('.tierPoints').fadeOut('slow'); 
 
    }); 
 
});

input[type=checkbox]{padding:0; margin:0;} 
 

 

 
td, th { 
 
    background: #ddd; 
 
    color: #000; 
 
    padding: 2px 10px; 
 
}

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

Answer 6

Versuchen Sie dies. Ändern Sie id von class. Id ist per Definition eindeutig.

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