javascript - 根据表单输入/单选按钮显示/隐藏 div

Question

我有一个是/否问题(单选按钮)，根据答案我想显示/隐藏 div。工作流程:从选择列表中选择公民身份，如果所选选项的值为1，询问其配偶是否有工作(单选按钮)，如果有工作，则显示询问个人号码的输入。当他们填写个人号码时，显示隐藏的 div(链接到下一步)。如果公民身份选项的值为 0(意味着他们没有伴侣)，则显示相同的隐藏 div(链接到下一步)。它一直有效，直到显示个人号码输入字段，但我不知道如何在 if/else 语句内向输入添加验证(检查是否在其中输入了某些内容，并且只有在输入时才显示下一步按钮)。尝试过这个，但不起作用:

else if($(this).attr("value")=="yes"){
$('input[fname=amount]').keyup(function(){
if($(this).val().length==5)
$('#stepsHIDDEN').show();
else
$('#stepsHIDDEN').hide();
}

你能帮忙吗？

  function showDiv(elem) {
    switch (elem.value) {
      case 'Select':
        document.getElementById('stepsHIDDEN').style.display = 'none';
        break;
      case '1':
        document.getElementById('questionHIDDEN').style.display = 'block';
        document.getElementById('stepsHIDDEN').style.display = 'none';
        break;
      case '0':
        document.getElementById('stepsHIDDEN').style.display = 'block';
        document.getElementById('questionHIDDEN').style.display = 'none';
        break;
    }
  }
if (document.getElementById('checkbox').checked) {
  document.getElementById('stepsHIDDEN').style.display = 'block';
} 


$(document).ready(function(){
    $('input[type="radio"]').click(function(){
    	if($(this).attr("value")=="no"){
            $("#stepsHIDDEN").show();
        } else if($(this).attr("value")=="yes"){
            $("#numberinputHIDDEN").show();
            $("#stepsHIDDEN").hide();
        } else { $("#stepsHIDDEN").hide();
        }
    });
});

#numberinputHIDDEN {
  display: none;
}
#stepsHIDDEN {
  display: none;
}
#questionHIDDEN {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<select name="status" id="soflow2" onchange="showDiv(this)">
  <option>Select</option>
  <option value="0">Single</option>
  <option value="1">Married</option>
  <option value="1">Registered Legal Partnership</option>
  <option value="1">Remarried</option>
  <option value="0">Legally Separated</option>
  <option value="0">Divorced</option>
  <option value="0">Widowed</option>
  <option value="1">Informal Partnership</option>
</select>

<div id="questionHIDDEN">
  <p>
    Is your spouse/legal partner working?
    <form role="form" class="question">
      <label class="radio-inline">
        <input type="radio" id="radiobutton" for="show" name="optradio" value="yes">Yes
      </label>
      <label class="radio-inline">
        <input type="radio" id="radiobutton" for="show" name="optradio" value="no">No
      </label>
    </form>
    <p id="numberinputHIDDEN">His/her Personnel Number:
      <input class="personnelnumber" type="text" name="fname">
    </p>


</div>
<div id="stepsHIDDEN">
  <button type="button" class="nextstep"><a href="05Step.html">Next</a>
  </button>
</div>

Answer 1

我查看了代码，除了必须将 jQuery 选择器从 'input[fname=amount]' 更改为 'input[name=fname]' 它基本上按原样工作。

https://jsfiddle.net/CyberneticianDave/98sd3jrn/

我唯一需要更改的是将 keyup 处理程序作为 document.ready 回调的一部分:

$(document).ready(function() {

  $('input[name=fname]').keyup(function(){
    if($(this).val().length==5)
      $('#stepsHIDDEN').show();
    else
      $('#stepsHIDDEN').hide();
  });

  $('input[type="radio"]').click(function() {
    if ($(this).attr("value") == "no") {
      $("#stepsHIDDEN").show();
    } else if ($(this).attr("value") == "yes") {
      $("#numberinputHIDDEN").show();
      $("#stepsHIDDEN").hide();
    } else {
      $("#stepsHIDDEN").hide();
    }
  });
});

希望有帮助!