javascript - 是或否单选按钮显示不同的 DIV

Question

我正在尝试为执行测试创建一个是或否问卷。如果他们对第一个问题的回答是肯定的，那么他们将被提出第二个问题，依此类推。如果他们对其中任何一个回答“否”，它会告诉他们联系管理员并提供 POC。

我正在使用这个 fiddle 作为我的基础，但是当我尝试添加 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>

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

FIDDLE