如果检查了某些单选按钮，显示div则显示不同的div？

Question

:) So I'm trying to create a user questionaire type form, it doesnt have to send to anyone just display a div once certain radio buttons are checked and if them certain radio buttons arent checked then display a different div, but also when the webpage opens/refreshes none of the div's I want to display to be displayed (if that makes sense?). I found some code on here to try but it didnt work for me, I'm a noob with JS & Jquery but was hoping anyone could shed some light on my problem. please find my code below.

Jquery?

if($('input[value=yes1]:checked,
 input[value=yes2]:checked, 
 input[value=yes3]:checked,
 input[value=yes4]:checked').length == 4){

$("#correct").show();

 }else{

$("#correct").hide();

HTML

<div class="row">
<div class="left">

    <div class="right answer">
        <div class="leftradio">
            <input type="radio" id="yes1" value="yes1" name="iCheck1">
            <label>Yes</label>
            </input>
        </div>

        <div class="rightradio">
            <input type="radio" id="no1" name="iCheck1">
            <label>No</label>
            </input>
        </div>

    </div>

</div>
<div class="right">

    <div class="right answer">
        <div class="leftradio">
            <input type="radio" id="yes2" value="yes2" name="iCheck2">
            <label>Yes</label>
            </input>
        </div>

        <div class="rightradio">
            <input type="radio" id="no2" name="iCheck2">
            <label>No</label>
            </input>
        </div>

    </div>
</div>

Yes No Yes No

CSS

 #correct{width:100%; height:50px; background:green; display:none;} #incorrect{width:100%; height:50px; background:red; display:none;} 

Answer 1

I think this is what you're looking for. I had to change the number of "correct" answers to two because that's all the html you have.

JS:

$( "input" ).on( "click", function() {
    if($('input[value=yes1]:checked, input[value=yes2]:checked').length === 2){
       $("#correct").show();
    }else{
       $("#correct").hide();
    }
});

Working JS Fiddle: http://jsfiddle.net/akj84vrq/12/

Answer 2

A little something like this would probably get you what you want. http://jsfiddle.net/uu512erm/

Listen for change event on the radio inputs by $('input:radio').change(function(){} and then just add the logic inside.

Answer 3

I'm not sure that this can be accomplished via CSS.

Now, you are checking against some values/elements that don't exist in your code (ie input[value=yes3]:checked , you don't have input with that value, check it for yourself).

I don't understand what exactly you want to accomplish, but I will still try to help and since you're new let's keep it very basic:

if ($('input[value=yes1]').is(':checked') && $('input[value=yes2]').is(':checked')) {
  // this will fire only if input with values yes1 and yes2 is checked
  $('div_to_show').show(); // put your own selectors here
  $('div_to_hide').hide(); // put your own selectors here
} 

if ($('input[value=no1]').is(':checked') && $('input[value=no2]').is(':checked')) {
  // this will fire only if input with values no1 and no2 is checked
  $('some_other_div_to_show').show(); // put your own selectors here
  $('some_other_div_to_hide').hide(); // put your own selectors here
}

if ($('input[value=yes1]').is(':checked') && $('input[value=no1]').is(':checked')) {
  # this will fire only if both input with values yes1 and no1 is checked
  $('some_other_div_to_show').show(); # put your own selectors here
  $('some_other_div_to_hide').hide(); # put your own selectors here
} 

# and so on... just type in your conditions and that's it. 

If you need some other cases, just add them using this pattern or construct one complex else if statement with all your scenarios.