Uncheck parent checkbox if one child is unchecked

Question

I am developing an application that requires the value of multiple checkboxes. I have nested lists containing checkboxes. The current functionality is this:

When a parent is checked, all children are checked under it.
When a child is checked, the parent is not selected.

I need to add this functionality:

When a child is unchecked after the parent is checked, the parent unchecks, but leaves the children checked.

$('input[name="level-1"],input[name="level-2"]').bind('click', function () { $('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked'))); });

My code is found here: http://jsfiddle.net/dbcottam/Py4UN/

score 2 · Accepted Answer · answered Aug 14 '13 at 16:47

A possible solution

Add a class someclass to the topmost ul element then

$('.someclass :checkbox').bind('click', function () {
    var $chk = $(this), $li = $chk.closest('li'), $ul, $parent ;
    if($li.has('ul')){
        $li.find(':checkbox').not(this).prop('checked', this.checked)
    }

    do{
        $ul = $li.parent();
        $parent = $ul.siblings(':checkbox');
        if($chk.is(':checked')){
            $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
        } else {
            $parent.prop('checked', false)
        }
        $chk = $parent;
        $li = $chk.closest('li');
    } while($ul.is(':not(.someclass)'));
});

Demo: Fiddle

I jumped the gun on the other answer. Though the other one did work, this one actually fills my needs 100%. — staples89, Aug 14 '13 at 19:12

score 0 · Answer 2 · answered Aug 14 '13 at 14:09

0

I tried out a generic function to handle multiple levels. See code below,

$('input[name^="level"]').click(function () {
    //v-- Takes care of check/uncheck all child checkbox
    $(this).parent().find('input[name^=level]').prop('checked', this.checked);

    if (!this.checked) {
        var level = this.name.substring(this.name.length - 1);    
        //using the naming convention `level-n` to uncheck parent
        for (var i = level - 1; i > 0; i--) {
            $('input[name="level-' + i + '"]').prop('checked', false);
        }
    }
});

DEMO: http://jsfiddle.net/46hTc/

answered Aug 14 '13 at 14:09

Selvakumar Arumugam

79,297
15
120
134

This answered my question in the simplist way, thank you. The solution by Arun P Johny is also acceptable and works the way I need it to function. – staples89 Aug 14 '13 at 18:22
@DavidCottam Thanks.. Feel free to extend this function for complex structures. – Selvakumar Arumugam Aug 14 '13 at 18:23

Uncheck parent checkbox if one child is unchecked

2 Answers2

Linked