我试图创建一个是或否的问卷来进行测试。如果他们对第一个问题的答案是肯定的，那么他们就会出现第二个问题，依此类推。如果他们对其中任何一个回答“否”，它将告诉他们联系管理员，它将提供POC。
我将这个小提琴作为我的基础，但当我尝试添加no选项以显示POC时，我无法使其工作。
Do you see the color red? Yes or No
如果他们选择是，则会出现下一个问题
Do you see the color blue? Yes or No
选择否后，问题就会停止，并说明与系统管理员联系。
http://jsfiddle.net/mail2zam/vQ4Up/
<form class="form-signin" role="form">
Do you see the color Red?
<input type="radio" name="myofficeissue" id="0" value="No">No
<input type="radio" name="myofficeissue" class="show_hide" rel="#slidingDiv" id="1" value="Yes">Yes
<div id="slidingDiv">
Do you see the color Blue?
<input type="radio" name="passwordissue" id="passwordissue-0" value="No">No
<input type="radio" name="passwordissue" class="show_hide" rel="#slidingDiv_2" id="passwordissue-1" value="Yes">Yes
</div>
<div>
<div id="alert-user">Please contact the administrator....</div>
</div>
</form>
答案 0 :(得分：1)
我在slideup事件中添加了警告框。这就是为什么任何一个人点击ON选项会改变它的显示警告框。
$(document).ready(function() {
$("input:radio").change(function() {
console.log(this);
if (this.value == 'Yes' && this.name == 'myofficeissue') {
$('#slidingDiv').slideDown();
} else if (this.value == 'No' && this.name == 'myofficeissue') {
$('#slidingDiv').slideUp(function() {
alert('contact your admin');
});
$('#slidingDiv_2').slideUp();
} else if (this.value == 'Yes' && this.name == 'passwordissue') {
$('#slidingDiv_2').slideDown();
} else if (this.value == 'No' && this.name == 'passwordissue') {
$('#slidingDiv_2').slideUp(function() {
alert('contact your admin');
});
}
});
});body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
#slidingDiv,
#slidingDiv_2 {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signin" role="form">
I am having a Cloud My Office log in issue
<input type="radio" name="myofficeissue" id="0" value="No">No
<input type="radio" name="myofficeissue" class="show_hide" rel="#slidingDiv" id="1" value="Yes">Yes
<div id="slidingDiv">
I am having a username and password issue.
<input type="radio" name="passwordissue" id="passwordissue-0" value="No">No
<input type="radio" name="passwordissue" class="show_hide" rel="#slidingDiv_2" id="passwordissue-1" value="Yes">Yes
</div>
<a href="#" class="show_hide" rel="#slidingDiv_2"></a>
<br />
<div id="slidingDiv_2">
I need to reset my password
<input type="radio" name="password" id="password-0" value="No" checked="checked" required>No
<input type="radio" name="password" id="password-1" value="Yes" required>Yes
</br>
My username needs updated.
<input type="radio" name="username" id="username-0" value="No" checked="checked" required>No
<input type="radio" name="username" id="username-1" value="Yes" required>Yes</br>
My account is locked out
<input type="radio" name="locked" id="locked-0" value="No" checked="checked" required>No
<input type="radio" name="locked" id="locked-1" value="Yes" required>Yes</br>
I am experiencing other problems
<input type="radio" name="other" id="other-0" value="No" checked="checked" required>No
<input type="radio" name="other" id="other-1" value="Yes" required>Yes</br>
</div>
</form>
答案 1 :(得分：1)
试试这个：
<强> HTML：
<form class="form-signin" role="form">
I am having a Cloud My Office log in issue
<input type="radio" name="myofficeissue" id="0" value="No">No
<input type="radio" name="myofficeissue" class="show_hide" rel="#slidingDiv" id="1" value="Yes">Yes
<div id="slidingDiv">
I am having a username and password issue.
<input type="radio" name="passwordissue" id="passwordissue-0" value="No">No
<input type="radio" name="passwordissue" class="show_hide" rel="#slidingDiv_2" id="passwordissue-1" value="Yes">Yes
</div>
<a href="#" class="show_hide" rel="#slidingDiv_2"></a><br />
<div id="slidingDiv_2">
I need to reset my password
<input type="radio" name="password" id="password-0" value="No" checked="checked" required> No
<input type="radio" name="password" id="password-1" value="Yes" required> Yes
</br>
My username needs updated.
<input type="radio" name="username" id="username-0" value="No" checked="checked" required> No
<input type="radio" name="username" id="username-1" value="Yes" required> Yes</br>
My account is locked out
<input type="radio" name="locked" id="locked-0" value="No" checked="checked" required> No
<input type="radio" name="locked" id="locked-1" value="Yes" required> Yes</br>
I am experiencing other problems
<input type="radio" name="other" id="other-0" value="No" checked="checked" required>No
<input type="radio" name="other" id="other-1" value="Yes" required>Yes</br>
</div>
<div>
<div id="alert-user">Please contact the administrator....</div>
</div>
</form>
<强> CSS：
body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}
#slidingDiv, #slidingDiv_2, #alert-user{
display:none;
}
<强> JS：
$(document).ready(function(){
$("input:radio").change(function(){
console.log(this);
if(this.value == 'Yes' && this.name == 'myofficeissue'){
$('#slidingDiv').slideDown();
$('#alert-user').slideUp();
}else if(this.value == 'No' && this.name == 'myofficeissue'){
$('#alert-user').slideDown();
$('#slidingDiv').slideUp();
$('#alert-user').slideUp();
$('#slidingDiv_2').slideUp();
}else if(this.value == 'Yes' && this.name == 'passwordissue'){
$('#slidingDiv_2').slideDown();
$('#alert-user').slideUp();
}else if(this.value == 'No' && this.name == 'passwordissue'){
$('#slidingDiv_2').slideUp();
$('#alert-user').slideDown();
}
});
});