Показать / скрыть элементы с помощью флажка поставить / снять отметку

Question

Я пытаюсь показать и скрыть tr таблицы с помощью флажка и снимите флажок. Я попробовал следующий сценарий, который у меня не работает.

$('.checks').on('ifChecked', function(event) {
  var checked = $(this).val();
  if (checked == 1) {
    $('.vegetables').show();
  }
  if (checked == 2) {
    $('.fruits').show();
  }
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="checkbox-inline">
   <input type="checkbox" class="checks" value="1">vegetables
   </label>
  <label class="checkbox-inline">
   <input type="checkbox" class="checks" value="2">Fruits
   </label>
</div>

<table>
  <tbody>
    <tr class="vegetables hidden">
      <td colspan="2">
        <h2>Vegetablese:</h2>
      </td>
    </tr>
    <tr class="vegetables hidden">
      <td>
        <label>Vegetables:</label>
        <input type="text">
      </td>
    </tr>
    <tr class="fruits hidden">
      <td colspan="2">
        <h2>Fruits:</h2>
      </td>
    </tr>
    <tr class="fruits hidden">
      <td>
        <label>Fuits:</label>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Есть пара проблем в вашем логе c. Во-первых, ifChecked не является допустимым событием. Вместо этого используйте change. Во-вторых, logi c не работает, чтобы скрыть элементы. Для этого вам нужно l oop через все флажки и определить их состояние, чтобы показать / скрыть содержимое внизу.

Самый простой и наиболее расширяемый способ достичь того, что вам нужно, - использовать data атрибут, чтобы указать, какой элемент должен переключаться при обновлении флажка. Затем вы можете просто скрыть / показать каждый элемент в наборе. Попробуйте это:

let $checks = $('.checks').on('change', () => $checks.each((i, el) => $(el.dataset.target).toggle(el.checked)));

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="checkbox-inline">
   <input type="checkbox" class="checks" value="1" data-target=".vegetables">vegetables
   </label>
  <label class="checkbox-inline">
   <input type="checkbox" class="checks" value="2" data-target=".fruits">Fruits
   </label>
</div>

<table>
  <tbody>
    <tr class="vegetables hidden">
      <td colspan="2">
        <h2>Vegetablese:</h2>
      </td>
    </tr>
    <tr class="vegetables hidden">
      <td>
        <label>Vegetables:</label>
        <input type="text">
      </td>
    </tr>
    <tr class="fruits hidden">
      <td colspan="2">
        <h2>Fruits:</h2>
      </td>
    </tr>
    <tr class="fruits hidden">
      <td>
        <label>Fuits:</label>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table>

Answer 2

Вот что вам нужно сделать:

• Замените ifChecked на onchange. Нет такого события, как ifChecked.
• Используйте toggle в зависимости от состояния флажка.
• Проверьте $(this).checked, чтобы найти состояние. Это вернет истину или ложь.

$('.checks').on('change', function(event) {
  var checked = $(this).val();
  if (checked == 1) {
    $('.vegetables').toggle($(this).checked);
  }
  if (checked == 2) {
    $('.fruits').toggle($(this).checked);
  }
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="checkbox-inline">
    <input type="checkbox" class="checks" value="1" /> vegetables
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" class="checks" value="2" /> Fruits
  </label>
</div>

<table>
  <tbody>
    <tr class="vegetables hidden">
      <td colspan="2">
        <h2>Vegetablese:</h2>
      </td>
    </tr>
    <tr class="vegetables hidden">
      <td>
        <label>Vegetables:</label>
        <input type="text">
      </td>
    </tr>
    <tr class="fruits hidden">
      <td colspan="2">
        <h2>Fruits:</h2>
      </td>
    </tr>
    <tr class="fruits hidden">
      <td>
        <label>Fuits:</label>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table>