Question

我有一个是/否问题（radiobutton），根据答案，我想显示/隐藏div。工作流程：如果所选选项的值为1，则从选择列表中选择民用状态，询问他们的配偶是否受雇（radiobutton），如果雇用，则显示输入要求提供个人号码。当他们填写个人号码时，显示隐藏的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();
}

你能帮忙吗？

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

2 个答案:

JQ代码