My jquery function is only hidding in table row while i am trying to hide all rows?

Question

This function is fade in and out but only for one row whose id is "AsserRow"

Why it is not working for all rows?

$('#chkTribe').change(function() {
  if (!this.checked) {
    $('#AsserRow').fadeIn('slow');
    $('#FoneRow').fadeIn('slow');
    $('#FtRow').fadeIn('slow');
  } else {
    $('#AsserRow').fadeOut('slow');
    $('#FoneRow').fadeIn('slow');
    $('#FtRow').fadeIn('slow');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="chkTribe" name="" value=""> <br/>

Rows that need to be hide,
<table>
  <tr id="AsserRow">
    <td>
      <span style="font-weight:bold">Asserah:</span>
    </td>
  </tr>
  <tr id="FoneRow">
    <td>
      <span style="font-weight:bold">FoneRow:</span>
    </td>
  </tr>
  <tr id="FtRow">
    <td>
      <span style="font-weight:bold">FtRow:</span>
    </td>
  </tr>
</table>

@Rory ids are unique but you can also check in run code snippet its only fading one — Doc, Mar 03 '20 at 09:45
Apologies, I misread the question. I thought you meant that it only worked for these three repeated rows in a larger table — Rory McCrossan, Mar 03 '20 at 09:46
In any case, your code is working as intended. Look at your fadeIn/Out calls. The only element you actually change is `#AsserRow` — Rory McCrossan, Mar 03 '20 at 09:47
@Rory no problem but why it is not working for other two rows any idea ? or i am making any mistake — Doc, Mar 03 '20 at 09:47
@Rory i am also fading "FoneRow" and "FtRow" but they are not working — Doc, Mar 03 '20 at 09:50
You only ever call `fadeIn()` on them and they're already visible, so nothing appears to happen. — Rory McCrossan, Mar 03 '20 at 09:50
Feel free to delete the question - I can delete my answer if you wish — mplungjan, Mar 03 '20 at 09:52

score 1 · Answer 1 · answered Mar 03 '20 at 09:51

You had fadeIn too many times in the else

This is simpler

$('#chkTribe').change(function() {
  if (this.checked) {
    $("[id$=Row]").fadeOut('slow'); // Alas no fadeToggle(boolean)
  } else {
    $("[id$=Row]").fadeIn('slow');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="chkTribe" name="" value=""> <br/>

Rows that need to be hide,
<table>
  <tr id="AsserRow">
    <td>
      <span style="font-weight:bold">Asserah:</span>
    </td>
  </tr>
  <tr id="FoneRow">
    <td>
      <span style="font-weight:bold">FoneRow:</span>
    </td>
  </tr>
  <tr id="FtRow">
    <td>
      <span style="font-weight:bold">FtRow:</span>
    </td>
  </tr>
</table>

score 0 · Answer 2 · answered Mar 03 '20 at 11:39

You can do this with just CSS ( if the layout is aproximately the same as the one you shared meaning that checkbox and table are siblings and table is after checkbox )

/* add common class to all rows you want to hide
for eg : hide-me */
/* or you could select all the rows that have id's that contain `Row` word
with #chkTribe:checked ~ table tr[id$=Row] */

#chkTribe:checked ~ table .hide-me {
  opacity:0;
  line-height: 0px;
}


table .hide-me {
  transition:0.3s ease-out;
  line-height: 20px;
}

<input type="checkbox" id="chkTribe" name="" value=""> <br/>

Rows that need to be hide,
<table>
  <tr class="hide-me" id="AsserRow">
    <td>
      <span style="font-weight:bold">Asserah:</span>
    </td>
  </tr>
  <tr class="hide-me"  id="FoneRow">
    <td>
      <span style="font-weight:bold">FoneRow:</span>
    </td>
  </tr>
  <tr class="hide-me"  id="FtRow">
    <td>
      <span style="font-weight:bold">FtRow:</span>
    </td>
  </tr>
  <tr>  <td>
      <span style="font-weight:bold">Other row here</span>
    </td>
  </tr>
</table>

My jquery function is only hidding in table row while i am trying to hide all rows?

2 Answers2