我需要帮助这个小提琴。 工作流程:
代码在我的本地保存中适用于最后一个单选按钮,但是当我在那里选择no时,Next按钮不会显示。
您可以帮我修复我的代码吗?
function showDiv(elem) {
switch (elem.value) {
case '1':
document.getElementById('questionHIDDEN').style.display = 'block';
document.getElementById('employedHIDDEN').style.display = 'none';
document.getElementById('numberinputHIDDEN').style.display = 'none';
document.getElementById('stepsHIDDEN').style.display = 'none';
break;
case '0':
document.getElementById('stepsHIDDEN').style.display = 'block';
break;
}
};
$(document).ready(function() {
$('input[name="employed"]').click(function() {
if ($(this).attr("value") == "no") {
$("#stepsHIDDEN").show();
$("#employedHIDDEN").hide();
$("#numberinputHIDDEN").hide();
} else if ($(this).attr("value") == "yes") {
$("#employedHIDDEN").show();
$("#stepsHIDDEN").hide();
} else {
$("#stepsHIDDEN").hide();
}
});
$('input[name="epworking"]').click(function() {
if ($(this).attr("value") == "no") {
$("#stepsHIDDEN").show();
$("#numberinputHIDDEN").hide();
} else
$("#numberinputHIDDEN").show();
$("#stepsHIDDEN").hide();
});
$('input[name=fname]').keyup(function() {
if ($(this).val().length == 6) {
$('#stepsHIDDEN').show();
} else
$('#stepsHIDDEN').hide();
});
});
#questionHIDDEN,
#employedHIDDEN,
#numberinputHIDDEN,
#stepsHIDDEN {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<main>
<div id="content">
<div id="text">
<h4>2/3 Civil Status</h4> What is your civil status?
<br>
<br>
<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="spouse">
<table id="questionHIDDEN">
<tr>
<td>
Is your spouse/legal partner employed?
</td>
</tr>
<tr>
<td class="left">
<form>
<span class="radiobutton"><input type="radio" name="employed" value="yes"> Yes </span>
<span class="radiobutton"><input type="radio" name="employed" value="no"> No </span>
</form>
</td>
</tr>
</table>
<table id="employedHIDDEN">
<tr>
<td>
Is your spouse/legal partner working in our institution?
</td>
</tr>
<tr>
<td class="left">
<form>
<span class="radiobutton"><input type="radio" name="epworking" value="yes"> Yes </span>
<span class="radiobutton"><input type="radio" name="epworking" value="no"> No </span>
</form>
</td>
</tr>
</table>
<table id="numberinputHIDDEN">
<tr>
<td>
<span>His/her personal number: <input class="personnelnumber" type="text" name="fname"> <i class="fa fa-info-circle tooltip" aria-hidden="true"><span class="tooltiptext">A 6 digit number, you can find it on an offical document.</span>
</i>
</span>
<td>
</tr>
</table>
</div>
</div>
<div id="stepsHIDDEN">
<button onclick="window.location='03Children.html'" class="nextstep">Next</button>
</div>
</div>
</main>
答案 0 :(得分:1)
问题在于您的$('input[name="epworking"]')
- click event
。在else
部分中,您没有用{}
括起行,因此else
只占用了一行执行。 $("#stepsHIDDEN").hide();
会event
执行$('input[name="epworking"]').click(function() {
if ($(this).attr("value") == "no") {
$("#stepsHIDDEN").show();
$("#numberinputHIDDEN").hide();
} else {
$("#numberinputHIDDEN").show();
$("#stepsHIDDEN").hide();
}
});
。因此,即使你展示它,后面的部分也隐藏了它。以下是修复。
{{1}}
<强> DEMO
强>