Переключатель флажка игнорирует первый щелчок, переключатель работает нормально после второго щелчка

Question

Кажется, все должно быть прямо. У меня есть элемент, который я хочу скрыть, когда установлен флажок.

Код

$(function() {
  $('#id_no_gates').click(function() {
    $("#id_gate_arm_operation").toggle(this.checked);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="no_gates" id="id_no_gates">
<table id="id_gate_arm_operation">...</table>

Я ожидаю, что когда я установлю флажок, таблица должна go исчезнуть. Но происходит то, что я щелкаю флажок один раз, ничего не происходит. Затем я снова устанавливаю флажок (снимаю флажок), и он исчезает. Это противоположно тому, что я хочу. Что мне не хватает? Функция не вызывается с первого раза? '.Click' - неправильный триггер?

Answer 1

Если вы хотите скрыть таблицу в отмеченном свойстве флажка, вам следует изменить свой код на этот

$("#id_gate_arm_operation").toggle(!this.checked);

Метод .toggle покажет элемент на значении true и скроет при false. Итак, в событии щелчка по флажку, когда мы получаем обновленное значение флажка. Следовательно, для свойства checked true нам нужно скрыть таблицу, поэтому нам придется передать false в метод .toggle, так как в непроверенном состоянии, если мы щелкнем, мы получим this.checked как true и false в проверенном состоянии .