Блог

У меня есть некоторый PHP-код, который генерирует форму… но на странице есть два скрытых раздела div, один внутри другого, которые отображаются или скрываются в зависимости от выбранных ответов.

Первый вопрос (который показывает второй вопрос, если выбрано значение «да») отлично работает.

Второй вопрос, если они нажимают на флажок «другое», то должно отображаться текстовое поле, позволяющее им указать свой ответ.

Все работает, за исключением того, что вы «снимаете» флажок «другое», он должен скрывать текстовое поле … и это не так. Если я переключу первый ответ на «Нет», то он правильно скроет второй вопрос … и я могу переключаться туда и обратно столько, сколько захочу, без проблем… но вопрос «Другое (указать)» внизу не работает.

Вероятно, это что-то простое, и я предполагаю, что это связано с javascript… но, похоже, я не могу ее найти.

Вот мой код:

 <script type="text/javascript">
$(document).ready(function() {

  $("#Q39_div").toggle($("input[name=38]:checked").val() == 1);  

  $("input[name='38']").change(function(){
    $("#Q39_div").toggle($(this).val() == 1);
  });

  $("#Q56_div").toggle($("input[name=q56]:checked").val() == 1);  

  $("input[name='q56']").change(function(){
    $("#Q56_div").toggle($(this).val() == 1);
  });
});
</script>

<form name='frmSurvey' method='post' action='DoAction.php?action=Survey6'>
  <input type='hidden' name='direction' value='forward'/>
  <ul type="none" style='padding-left: 20px;'>
      Have you changed jobs <i>within the GNWT</i> in the past two years?
      <blockquote>
        <input type="radio" name="38" value="1" /> amp;nbsp;Yes<br>
        <input type="radio" name="38" value="2" /> amp;nbsp;No<br>
        <br/> <br/>
      </blockquote>
    <div id="Q39_div" style="width:75%; display:none;">  
    <table width="90%" cellpadding="3" cellspacing="0" border='1' class='SurveyTable'>
      <input type="hidden" name="q51" value="99" />
      <input type="checkbox" name="q51" value="1" />amp;nbsp;Blah blah blah<br />
      <input type="hidden" name="q52" value="99" />
      <input type="checkbox" name="q52" value="1" />amp;nbsp;More blah blah blah<br />
      <input type="hidden" name="q53" value="99" />
      <input type="checkbox" name="q53" value="1" />amp;nbsp;Some other blah blah blah<br />
      <input type="hidden" name="q54" value="99" />
      <input type="checkbox" name="q54" value="1" />amp;nbsp;Again blah blah blah<br />
      <input type="hidden" name="q55" value="99" />
      <input type="checkbox" name="q55" value="1" />amp;nbsp;Who cares blah blah blah<br />
      <input type="hidden" name="q56" value="99" />
      <input type="checkbox" name="q56" value="1" />amp;nbsp;Other (Specify)<br />
    </table>
    <div id="Q56_div">
      <input name="q56_text" value="" class="SpecifyBox" type="text" size="15" maxlength="50" />
    </div>
    </div><br>
  </ul>
  

$(this).val() == 1 всегда будет возвращаться, true поскольку значение остается ‘1’, и оно никогда не вернется false , поэтому никогда не скрывайте ввод.

Используйте $(this).is(':checked') to show/hide в зависимости от состояния флажка (установлен или снят):

 $("input[name='q56']").change(function(){
    $("#Q56_div").toggle($(this).is(':checked'));
});
  

Или просто используйте $("#Q56_div").toggle(); напрямую без параметров, взгляните на .toggle() .

 $("input[name='q56']").change(function(){
    $("#Q56_div").toggle();
});
  

Надеюсь, это поможет.

 $(document).ready(function() {

  $("#Q39_div").toggle($("input[name=38]:checked").val() == 1);  

  $("input[name='38']").change(function(){
    $("#Q39_div").toggle($(this).val() == 1);
  });

  $("#Q56_div").toggle($("input[name=q56]:checked").val() == 1);  

  $("input[name='q56']").change(function(){
    $("#Q56_div").toggle($(this).is(':checked'));
  });
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='frmSurvey' method='post' action='DoAction.php?action=Survey6'>
  <input type='hidden' name='direction' value='forward'/>
  <ul type="none" style='padding-left: 20px;'>
    Have you changed jobs <i>within the GNWT</i> in the past two years?
    <blockquote>
      <input type="radio" name="38" value="1" /> amp;nbsp;Yes<br>
      <input type="radio" name="38" value="2" /> amp;nbsp;No<br>
      <br/> <br/>
    </blockquote>
    <div id="Q39_div" style="width:75%; display:none;">  
      <table width="90%" cellpadding="3" cellspacing="0" border='1' class='SurveyTable'>
        <input type="hidden" name="q51" value="99" />
        <input type="checkbox" name="q51" value="1" />amp;nbsp;Blah blah blah<br />
        <input type="hidden" name="q52" value="99" />
        <input type="checkbox" name="q52" value="1" />amp;nbsp;More blah blah blah<br />
        <input type="hidden" name="q53" value="99" />
        <input type="checkbox" name="q53" value="1" />amp;nbsp;Some other blah blah blah<br />
        <input type="hidden" name="q54" value="99" />
        <input type="checkbox" name="q54" value="1" />amp;nbsp;Again blah blah blah<br />
        <input type="hidden" name="q55" value="99" />
        <input type="checkbox" name="q55" value="1" />amp;nbsp;Who cares blah blah blah<br />
        <input type="hidden" name="q56" value="99" />
        <input type="checkbox" name="q56" value="1" />amp;nbsp;Other (Specify)<br />
      </table>
      <div id="Q56_div">
        <input name="q56_text" value="" class="SpecifyBox" type="text" size="15" maxlength="50" />
      </div>
    </div><br>
  </ul>
</form>  

Вы проверяете значение флажка, которое не меняется, когда оно установлено. Вы должны проверить, проверено ли это

 $("input[name='q56']").change(function(){
  $("#Q56_div").toggle(this.checked);
});