根据表单输入/单选按钮显示/隐藏 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();
    }
  });
});

希望有帮助！

Answer 2

试试下面的代码

<select name="status" id="soflow2" onchange="showDiv(this)">
      <option value="Select">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>

JQ码

function showDiv(elem) {
        switch ($(elem).find(':selectd').val()) {
            case 'Select':
                $('#stepsHIDDEN').hide();
                break;
            case '1':
                $('#questionHIDDEN').show();
                $('#stepsHIDDEN').hide();
                break;
            case '0':
                $('#stepsHIDDEN').show();
                $('#questionHIDDEN').hide();
                break;
        }
    }
    if ($('#checkbox').is(':checked')) {
        $('#stepsHIDDEN').show();
    }


    $(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();
            }
        });
    });


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