Question

I have a form that the user can save and return to edit. I have questions on the form that toggle a div based on the user’s answer to a previous question. There are multiple of these question types. If the answer is ‘yes’, the div for that question should display.

Currently, the divs are displaying on the form load, when they should be hidden.

Example: http://jsfiddle.net/BbrwT/14/ (I setup example so question one has not been answered yet, where question two has been answered ‘no’)

<div>
    <label>Select #1:</label>
    <input type="radio" name="radio1" class="toggle" value="1">Yes
    <input type="radio" name="radio1" class="toggle" value="0">No
</div>

<div id="details">
   Details #1
</div>

<div>
    <label>Select #2:</label>
    <input type="radio" name="radio2" class="toggle" value="1">Yes
    <input type="radio" name="radio2" class="toggle" value="0" checked="checked">No
</div>

<div id="details">
   Details #2
</div>

Javascript:

$(document).ready(function() {

    if($('.toggle:checked').val() != 1){
        $(this).parent().next('#details').hide()
    }

    $('.toggle').on('change',function(){

        var showOrHide = ($(this).val() == 1) ? true : false;

        $(this).parent().next('#details').toggle(showOrHide);

    })  

});

Answer 1

Not sure if this is what you want, but you could chain the change method on to your change handler –

$('.toggle').on('change',function(){

    var showOrHide = false;

    $(this).siblings('input[type=radio]').andSelf().each(function() {
        if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true;
    })    

    $(this).parent().next('#details').toggle(showOrHide);

}).change()  

That should call the change method on loading the page and hide anything that your logic states should be hidden. I’ve also changed logic slightly so the values of sibling radio buttons are also checked.

Demo – http://jsfiddle.net/sBErV/2/