IF OR ELSE statement

[andyc209]

I am using the following script for a form

<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="Q1YES"){
$(".box").hide();
$(".yes").show();
}
if($(this).attr("value")=="Q2YES"){
$(".box").hide();
$(".yes").show();
}
if($(this).attr("value")=="Q3YES"){
$(".box").hide();
$(".yes").show();
}
if($(this).attr("value")=="Q4YES"){
$(".box").hide();
$(".yes").show();
}
if($(this).attr("value")=="Q5YES"){
$(".box").hide();
$(".yes").show();
}
if($(this).attr("value")=="Q5NO"){
$(".box").hide();
$(".no").show();
}
});
});
</script>

If the user checks the YES radio button to any question it will show the YES Div - if they click NO to the last question it will show the NO div.

What i really want is for this to be if they click YES to any question show the YES div and if they click NO to all the questions only then show the NO div (triggered on the last radio filed)

I have tried

if($(this).attr("value")=="Q1NO") && if($(this).attr("value")=="Q2NO") && if($(this).attr("value")=="Q3NO") && if($(this).attr("value")=="Q4NO") && if($(this).attr("value")=="Q5NO") {
$(".box").hide();
$(".no").show();
}

but it does not work

likewise i have tried

if($(this).attr("value")=="Q1NO") || if($(this).attr("value")=="Q2NO") || if($(this).attr("value")=="Q3NO") || if($(this).attr("value")=="Q4NO") || if($(this).attr("value")=="Q5NO") {
$(".box").hide();
$(".yes").show();
}

for the Yes part and this does not work

any ideas?

 

[jpadie]

the value of a radio is always available. to see whether it has been selected then you need to use the ':selected' selector.

you have not provided any html but perhaps this would work (not tested)

$(document).ready(function(){
    $('input[type="radio"]').on('click', function(e){
      if( $(this).is(':checked') ){
        if($(this).is('[value*="YES"]')){
            /* a yes button is selected */
            $('.no').hide();
            $('.yes').show();
        } else {
            checkNos();
        }   
      } else {
        checkNos();
      }
    });

    function checkNos(){
      if($('input[type="radio"]:not(:checked)').length == 0){
        $('.no').show();
        $('.yes').hide();
      }
    }
});

 

[andyc209]

thanks for the response but it did not seem to work

i have created a basic page with a sample form on - the full code is can be seen 'view source'

Link

 

[jpadie]

with the html that you have this should work (tested this time...)

$(document).ready(function(){
        $('input[type="radio"]').on('change', function(){
            var num = $('input[type="radio"]').length / 2;
            var yes = $('input[type="radio"][value*="YES"]:checked').length;
            var no = $('input[type="radio"][value*="NO"]:checked').length;
            $('.box').hide();
            if(yes > 0) $('.yes').show();
            if(no == num) $('.no').show();
        }).trigger('change');
});

 

[andyc209]

cheers jpadie - works great -so grateful for the help.
so i understand the script is saying if i tick more than 0 'YES' boxes show the Yes div but if the No's equal the total number of radio/2 then show the No - sound about right?

 

[jpadie]

oh. very sorry - i pasted the version without inline comments.

essentially the code says

1. wait until the DOM has loaded.
2. wait until a radio box has changed
3. calculate the number of radio boxes and divide by two (to get the number of binary choice groups). assign to variable num
4. calculate the number of radio boxes that are checked and have the word YES in their value. assign to variable yes
5. do likewise for those that have the word NO in their value, assign to variable no
6. hide the yes and no box
7. if the variable yes is greater than zero (then not all no's are clicked) display the yes box
8. if the number of no's is identical to the number of radio groups (then all no's are clicked), display the no box
9. otherwise display neither box (this is the case in the starting state where the radio boxes are indeterminate.
10. .trigger('change') sets the visibility on load in the case that the browser remembers the selections or you have preset them etc. In fact this is a bit sloppy since the code will be triggered ten times. it would be better to insert this before the trigger.

.find(':first').trigger('change');