Hiding table rows with checkbox

Question

I'm trying to hide table rows when a tickbox is checked. I have managed to get it working, but it will only hide the first instance of the id. Could someone direct me in to changing the js so it will hide all with matching 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>

You need to use `tierPoints` class. You cannot you multiple `tr` with same `id` — Mihai Alexandru-Ionut, Jan 13 '17 at 14:59
No need for class identifiers neither even ids: use `$(this).closest('tr').siblings()`. — Andre Figueiredo, Jan 13 '17 at 15:04

score 2 · Answer 1 · edited Jan 13 '17 at 15:11

2

In HTML, an id has to be unique. See www.w3.org... for more details.

Try to change id="tiersPoints" to class="tiersPoints".

edited Jan 13 '17 at 15:11

War10ck

12,387
7
41
54

answered Jan 13 '17 at 15:00

rageberry

21
3

score 1 · Answer 2 · answered Jan 13 '17 at 15:00

You need to have unique ids. Use classes in this case:

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

score 1 · Answer 3 · answered Jan 13 '17 at 15:00

An id should be distinct within your page.

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

score 1 · Answer 4 · answered Jan 13 '17 at 15:00

Here is solution:

As i mentioned in comment : You need to use tierPoints class. You cannot you multiple tr with same 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>

Thank you all. I could not see what I had done wrong... so obvious now... my bad... I cant mark every answer as accepted, so thank you all — Wayne Gilliver, Jan 13 '17 at 15:18

score 1 · Answer 5 · answered Jan 13 '17 at 15:01

Try this. Change id by class. Id is unique by definition.

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

score 1 · Accepted Answer · answered Jan 13 '17 at 15:05

You need to use the "class" selector instead of ID Selector and the ID needs to be unique. You can have multiple elements with same Class Name.

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

Hiding table rows with checkbox

6 Answers6