はいまたはいいえラジオボタンを押して別のDIVを表示します

Question

テストを実行するためにイエスまたはノーの質問を作成しようとしています。最初の質問に「はい」と答えると、2番目の質問などが表示されます。彼らがいずれかに答えない場合は、管理者に連絡するように指示し、POCを提供します。

私はこのフィディドを私のもとにしていますが、POCを表示するためにnoオプションを追加しようとすると動作しません。

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

Answer 2

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