Как использовать jQuery для отображения контента в зависимости от того, установлен ли переключатель

Question

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

HTML

<fieldset id="question">
  <legend>This is my question</legend>
  <label for="answerYes">Yes</label>
  <input name="answer" id="answerYes" type="radio" value="1" />
  <label for="answerNo">No</label>
  <input name="answer" id="answerNo" type="radio" value="0" />
</fieldset>

JQuery

$("#subQuestion").hide();
$("#answerYes").click(function() {
  $("#subQuestion").show();
});
$("#answerNo").click(function() {
  $("#subQuestion").hide();
});

Эта логика ломается, хотя, когда кто-то возвращается к форме, чтобы отредактировать ее. В этом случае поля предварительно заполнены, поэтому функция щелчка не существует. Как я могу использовать jQuery для показа #subQuestion, если #answerYes отмечен при загрузке страницы.

Answer 1

Попробуйте добавить обработчик $ (document) .ready () на свою страницу ...

$(document).ready(function(){
  // do your checks of the radio buttons here and show/hide what you want to
  $("#subQuestion").hide();
  if ($("#answerYes:checked").length > 0){ $("#subQuestion").show(); }

  // add functionality for the onclicks here
  $("#answerYes").click(function() {
    $("#subQuestion").show();
  });

  $("#answerNo").click(function() {
    $("#subQuestion").hide();
  });
});

Этот обработчик сработает после полной загрузки страницы (и динамического предварительного заполнения значениями)

Answer 2

Присоединить логику к событию change() *. Кроме того, вы можете использовать селектор :checked, чтобы получить выбранную в данный момент радиокнопку.

<input name="food" type="radio" value="apples" />
<input name="food" type="radio" value="oranges" />

-

$(":radio[name='food']").change(function(){
  var newVal = $(":radio[name='food']:checked").val();
  if (newVal == "apples") {
    $("#someBox").show();
  } else {
    $("#someBox").hide();
  }
});

^{* Некоторые сообщают о проблемах с change, и вместо этого имеют
используется click() для обработки логики}

Answer 3

Храните всю логику рендеринга в одной функции и вызывайте эту функцию при возврате документа:

function renderSubquestion() {
  $('#subQuestion').toggle($("#answerYes").attr('checked'));
}

$(function(){
  $('#answerNo').click(renderSubquestion);
  $('#answerYes').click(renderSubquestion);
  renderSubquestion();
}

Answer 4

Если ответ на стороне сервера, например, через PHP, то вам просто нужно установить стиль #subQuestion, используя код на стороне сервера:

if($databaseFieldForAnswer != 1){
    $subDiv = '<div style=\"visibility: hidden\"></div>';
}

... еще лучше, назначьте класс, который обрабатывает, показывается ли div или нет.