Моя jquery функция скрывается только в строке таблицы, когда я пытаюсь скрыть все строки?

Question

Эта функция появляется и исчезает, но только для одной строки с идентификатором "AsserRow"

Почему она работает не для всех строк?

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

Answer 1

Вы слишком часто исчезали в остальном

Это проще

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

Answer 2

Вы можете сделать это с помощью CSS (если макет примерно такой же, как у того, которым вы поделились, это означает, что флажок и таблица - это братья и сестры, а таблица - после флажка)

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