PHP 生成的 HTML 中的 JS 错误

Question

我有一些生成表单的 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" /> &nbsp;Yes<br>
        <input type="radio" name="38" value="2" /> &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" />&nbsp;Blah blah blah<br />
      <input type="hidden" name="q52" value="99" />
      <input type="checkbox" name="q52" value="1" />&nbsp;More blah blah blah<br />
      <input type="hidden" name="q53" value="99" />
      <input type="checkbox" name="q53" value="1" />&nbsp;Some other blah blah blah<br />
      <input type="hidden" name="q54" value="99" />
      <input type="checkbox" name="q54" value="1" />&nbsp;Again blah blah blah<br />
      <input type="hidden" name="q55" value="99" />
      <input type="checkbox" name="q55" value="1" />&nbsp;Who cares blah blah blah<br />
      <input type="hidden" name="q56" value="99" />
      <input type="checkbox" name="q56" value="1" />&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>

Answer 1

$(this).val() == 1 将始终返回 true，因为该值保持为“1”，并且永远不会返回 false，因此永远不要隐藏输入。

根据复选框状态（选中或未选中）使用$(this).is(':checked') 到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" /> &nbsp;Yes<br>
      <input type="radio" name="38" value="2" /> &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" />&nbsp;Blah blah blah<br />
        <input type="hidden" name="q52" value="99" />
        <input type="checkbox" name="q52" value="1" />&nbsp;More blah blah blah<br />
        <input type="hidden" name="q53" value="99" />
        <input type="checkbox" name="q53" value="1" />&nbsp;Some other blah blah blah<br />
        <input type="hidden" name="q54" value="99" />
        <input type="checkbox" name="q54" value="1" />&nbsp;Again blah blah blah<br />
        <input type="hidden" name="q55" value="99" />
        <input type="checkbox" name="q55" value="1" />&nbsp;Who cares blah blah blah<br />
        <input type="hidden" name="q56" value="99" />
        <input type="checkbox" name="q56" value="1" />&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>

Answer 2

您正在检查复选框的 值，它在被选中时不会改变。你应该检查它是否被选中

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