Question

I have 2 main checkboxes “ja” and “nee”. When one of these checkboxes is checked it opens up a submenu that has 1 or more checkboxes. These subcheckboxes are also “ja” and “nee” and respond to the choice made in the maincheckbox. The problem I’m having is that the user can choose “nee” in the main checkbox and then change all the subcheckboxes to “ja” but then the maincheckbox stays at “nee” but it has to switch to the “ja” checkbox.

I’ve made it so that the questions only have 2 checkboxes and only on the them can have a checked attribute and the subcheckboxes are in a div class called “submenu”.

What I think the solution to this problem is to check if any of the “nee” class subcheckboxes is checked in the submenu. If it is the maincheckbox stays at “nee” else remove the checked attribute from the “nee” maincheckbox and switch it to the “ja” checkbox. But obviously I can’t figure out how to do that.

I made small jsFiddle showing the project: http://jsfiddle.net/B2zs5/

<div>
<p>Heb je DigiD?</p>
                <div class="antwoorden">
                    <input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
                    <input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label> 
                    <div class="extra_info">?
                        <div class="extra_info_popup">
                            Hidden tekst
                        </div>
                    </div>
                </div>
            </div>

And here’s the jQuery code

    $('.open_sub_ja').click(function () {
    $(this).parents('.container_vragen').find('.ja').attr('checked', this.checked);
    $(this).parents('.container_vragen').find('.nee').removeAttr('checked');
});

$('.open_sub_nee').click(function () {
    $(this).parents('.container_vragen').find('.ja').removeAttr('checked');
    $(this).parents('.container_vragen').find('.nee').attr('checked', this.checked);
});

    $('.ja').click(function () {
        $(this).parents('.antwoorden').find('.ja').attr('checked', this.checked);
        $(this).parents('.antwoorden').find('.nee').removeAttr('checked');
    });

    $('.nee').click(function () {
        $(this).parents('.antwoorden').find('.ja').removeAttr('checked');
        $(this).parents('.antwoorden').find('.nee').attr('checked', this.checked);
    });

If I were to guess it would be something like this,

  if('.nee'.attr('checked')) {
    // do nothing
} 
else {
    $('.open_sub_nee').removeAttr('checked');
    $('.open_sub_ja').attr('checked');
}

Answer 1

I’m guessing you want main nee > all sub’s ja > set the main to ja and vice versa to have main ja change to nee when 1 or more sub’s are nee.

the second bit is easy:

$('.nee').click(function () {
    $(this).parents('.antwoorden').find('.ja').removeAttr('checked');
    $(this).parents('.antwoorden').find('.nee').attr('checked', this.checked);

    $(this).parents('.container_vragen').find('.open_sub_ja').removeAttr('checked');
    $(this).parents('.container_vragen').find('.open_sub_nee').attr('checked', this.checked);
});

it seems to have saved my edit in http://jsfiddle.net/B2zs5/2/

all checkboxes in the submenu to ja changes the main nee to ja:
http://jsfiddle.net/B2zs5/5/ – I’ve used Teun’s code and Determine if all checkboxes within jQuery object are checked, return as boolean

$('.ja').click(function () {
    $(this).parents('.antwoorden').find('.ja').attr('checked', this.checked);
    $(this).parents('.antwoorden').find('.nee').removeAttr('checked');

    $group1 = $(this).parents('.submenu').find('.ja');
    if( $group1.filter(':not(:checked)').length === 0){
        //ALL ja checkboxes in submenu checked
        $(this).parents('.container_vragen').find('.open_sub_ja').attr('checked', this.checked);
        $(this).parents('.container_vragen').find('.open_sub_nee').removeAttr('checked');
    }
});