Отображение / скрытие div на основе флажка с использованием jQuery

Question

У меня есть форма с флажком (содержится в метке #contact). Для действия по изменению этого флажка я показываю / скрываю div (#options).

Чтобы убедиться, что если флажок установлен, всегда отображается #options div (и избежать ситуации, когда флажок фактически скрывает последующие параметры), я использую этот код:

$('#contact :checkbox').is(':checked') ? $("#options").show() : $("#options").hide();

Это отлично работает. У меня проблема в том, что вместо одного флажка с идентификатором я хочу иметь несколько флажков. Я хочу показать / скрыть следующий экземпляр моего .hidden класса в зависимости от того, установлен ли предыдущий флажок (внутри метки с классом .trigger) или нет. Я пробовал это:

$(document).ready(function() {
    if( $('.trigger :checkbox').is(':checked') ) {
        $(this).parent().nextAll('ul.hidden').show();
    } else {
        $(this).parent().nextAll('ul.hidden').hide();
    }
});

Но безрезультатно. Флажки находятся в неупорядоченном списке, например:

<ul>
  <li><label class="trigger"><input type="checkbox" name="02" /> Trigger 1</label>
      <ul class="hidden">
        <li><label><input type="checkbox" name="02-sub1" /> Normal</label></li>
        <li><label><input type="checkbox" name="02-sub2" /> Normal</label></li>
      </ul>
  </li>
  <li><label><input type="checkbox" name="02" /> Normal</label></li>
  <li><label><input type="checkbox" name="03" /> Normal</label></li>
  <li><label class="trigger"><input type="checkbox" name="04" /> Trigger 2</label>
      <ul class="hidden">
        <li><label><input type="checkbox" name="04-sub1" /> Normal</label></li>
        <li><label><input type="checkbox" name="04-sub2" /> Normal</label></li>
      </ul>
  </li>
</ul>

Я не вижу, куда я иду не так; предположительно, мой селектор неверен, но я долго играл с синтаксисом и ничего не получил. Заранее спасибо (и спасибо, что прочитали это далеко).

Answer 1

Вам необходимо запустить код внутри обработчика change, поэтому this относится к нужному флажку, например:

$(document).ready(function() {
   $('.trigger :checkbox').change(function() {
     if( $(this).is(':checked') ) {
       $(this).parent().nextAll('ul.hidden').show();
     } else {
       $(this).parent().nextAll('ul.hidden').hide();
     }
   });
});

... и это можно сделать намного короче с .toggle(bool), например:

$(function() {
   $('.trigger :checkbox').change(function() {
     $(this).parent().nextAll('ul.hidden').toggle(this.checked);
   });
});

Если вам нужно, чтобы он запускался при загрузке страницы, чтобы состояния показа / скрытия соответствовали флажку, просто вызовите этот обработчик change с .change() (ярлык для .trigger('change') ), вот так:

$(function() {
   $('.trigger :checkbox').change(function() {
     $(this).parent().nextAll('ul.hidden').toggle(this.checked);
   }).change();
});

Answer 2

Вы знаете, что можете катать свои собственные поля, верно?Типичный способ сделать это с помощью поля "rel =", которое не имеет значения в HTML, но может быть выбрано и использовано в jquery.

if ($('#contact :checkbox').is(':checked')) {
    $("#" + $('#contact :checkbox').attr('rel')).show();
} else {
    $("#" + $('#contact :checkbox').attr('rel')).hide();
}

И затем:

  <li><label class="trigger"><input type="checkbox" name="04" rel="hidden-04" /> Trigger 2</label>
      <ul class="hidden" id="hidden-04">
        <li><label><input type="checkbox" name="04-sub1" /> Normal</label></li>
        <li><label><input type="checkbox" name="04-sub2" /> Normal</label></li>
      </ul>
  </li>

Итак, когда флажок с именем 04 установлен, мы ищем в его поле rel идентификатор объекта hide() или show().Я думаю, что это НАМНОГО проще, чем пытаться пройти через дом, чтобы найти целевой объект.