Setting checkbox values in Javascript based on nested values

Question

As a follow up to this question Javascript for nested 'Select all' checkboxes, I have a list of checkboxes with a 'Select All' option for every item, and a 'Select All' item for each group.

I set the checkboxes server side, and what I'd like to do is use JQuery to set the 'select all' checkboxes if the child checkboxes are selected when the page loads, and also to set the select all checkboxes if the child options are checked.

<fieldset>
    <label>
        <input type="checkbox" class="checkall"><strong> All</strong>
    </label>
    <fieldset>
        <label>
            <input type="checkbox" name="checkedLocations" class="chkChild checkall" value="China" />
            <strong>&nbsp;&nbsp;China</strong>
        </label>
        <label>
            <input type="checkbox" name="checkedLocations" class="chkChild" value="Hong Kong" checked="checked" />
            &nbsp;&nbsp;&nbsp;Hong Kong
        </label>
    </fieldset>
    <fieldset>
        <label>
            <input type="checkbox" name="checkedLocations" class="chkChild checkall" value="Australia" />
            <strong>&nbsp;&nbsp;Australia</strong>
        </label>
        <label>
            <input type="checkbox" name="checkedLocations" class="chkChild" value="NSW" />
            &nbsp;&nbsp;&nbsp;NSW
        </label>

        <label>
            <input type="checkbox" name="checkedLocations" class="chkChild" value="VIC" />
            &nbsp;&nbsp;&nbsp;VIC
        </label>
    </fieldset>
</fieldset>

I have a Select All checkbox that selects/deselects everything, and a checkbox next to each country (Australia and China in this example) that selects/deselects all the locations in that country, with the following code:

    $(function () {
        $('.checkall').on('click', function () {
            $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
        });
        $('.chkChild').on('click', function () {
            if (!$(this).is('.checkall')) {
                $(this).closest('fieldset').find('.checkall').prop('checked', false);
            }
        });
    });

If for example, a user checks on all the options under each country then for that country checkbox to be checked. If all country check boxes are checked, then the top Select All option should then be checked. — Evonet
– Evonet, Commented Mar 17, 2014 at 10:35
That is what you want. What your problem in implementing it is, you still haven’t told us. — C3roe
– C3roe, Commented Mar 17, 2014 at 10:37
I don't know where to start, my Javascript is quite poor! I believe I need to set a function on document.ready which mirrors my existing ones, but not sure of an elegant way to do this without duplicating code — Evonet
– Evonet, Commented Mar 17, 2014 at 10:43
If you don’t want to duplicate code, then use named functions that you can refer to in different places, instead of anonymous ones. — C3roe
– C3roe, Commented Mar 17, 2014 at 10:51

Arun P Johny · Accepted Answer · 2014-03-18 10:43:08Z

1

Try

$(function () {
    $('.checkall').on('change', function () {
        var $this = $(this);
        $this.closest('fieldset').find(':checkbox').prop('checked', this.checked);
        if($this.is('.chkChild')){
            $('.checkall:not(.chkChild)').prop('checked', $('.checkall.chkChild').not(':checked').length == 0)
        }
    });
    $('.chkChild:not(.checkall)').on('change', function () {
        var $fs = $(this).closest('fieldset'),
            $all = $fs.find('.checkall'),
            childstate = $fs.find('> label > input[type="checkbox"]').not('.checkall').not(':checked').length == 0;
        $all[childstate ? 'not' : 'filter'](':checked').prop('checked', childstate).change();
    });
});

Demo: Fiddle

answered Mar 18, 2014 at 10:43

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Evonet Over a year ago

Exactly what I was after

nettux · Accepted Answer · 2014-03-17 11:42:43Z

0

If I'm correct about what you want then this should do it.

$(function () {
    checkBoxes();
    $('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
    $('.chkChild').on('click', function () {
        if (!$(this).is('.checkall')) {
            $(this).closest('fieldset').find('.checkall').prop('checked', false);
        }
        checkBoxes();
    });
});

function checkBoxParents (jelem) {
    jelem.parents('fieldset')
    .find("> label > input[type=checkbox]:first")
    .prop('checked', jelem.prop('checked'));
}

function checkBoxes () {
    var any = false;
    $('.chkChild').each( function () {
        if ($(this).prop('checked')) {
            checkBoxParents($(this));
            any = true;
        }
    });
    if (!any) { $(".checkall").prop("checked", false); }
}

edited Mar 17, 2014 at 11:42

answered Mar 17, 2014 at 11:25

nettux

5,4444 gold badges26 silver badges34 bronze badges

1 Comment

Evonet Over a year ago

Not quite - you'll see that with your example if you click on just one of the children under "Australia", i.e., VIC, then Australia will be checked. Australia should only be checked if BOTH NSW and VIC are checked

Collectives™ on Stack Overflow

Setting checkbox values in Javascript based on nested values

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related