Jquery Check parent checkboxes in nested ul li

Question

I have a script that will check and uncheck all children checkboxes in a nested list. I am now trying to get it so I can check a low level checkbox and it will check all the

Answer 1

Have a JSFiddle: http://jsfiddle.net/3y3Pb/16/

I would recommend adding a parent attribute to the checkboxes. This parent attribute will reference the parent checkbox's id so that you don't have to worry about your structure changing:

$('input type=[checkbox]').change(function () {
    $('#' + $(this).attr('parent')).prop('checked', this.checked);
});

Ex:

<input type="checkbox" name="account_settings" value="yes" id="as">Account Settings
    <ul>
        <li><input type="checkbox" name="one" value="one" parent="as" id="one">AS One</li>

Answer 2

It looks like you want something like this

$('input[type=checkbox]').click(function(){
    if(this.checked){ // if checked - check all parent checkboxes
        $(this).parents('li').children('input[type=checkbox]').prop('checked',true);
    }
    // children checkboxes depend on current checkbox
    $(this).parent().find('input[type=checkbox]').prop('checked',this.checked); 
});

FIDDLE

If you want to check up and down hierarchy - you can do it like this

$('input[type=checkbox]').click(function(){
    // children checkboxes depend on current checkbox
    $(this).next().find('input[type=checkbox]').prop('checked',this.checked);
    // go up the hierarchy - and check/uncheck depending on number of children checked/unchecked
    $(this).parents('ul').prev('input[type=checkbox]').prop('checked',function(){
        return $(this).next().find(':checked').length;
    });
});

FIDDLE

Answer 3

You can use prevAll() also I have the same issue. In my case there are multiple checkboxes in li with labels, and each checkbox above target have class parent (generated in js)

$(this).parents().prevAll('input:checkbox.parent').each(function () {
                       $(this).attr('checked', true);
                   });

Answer 4

This should do it:

$('input[type=checkbox]').click(function () {
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
    var sibs = false;
    $(this).closest('ul').children('li').each(function () {
        if($('input[type=checkbox]', this).is(':checked')) sibs=true;
    })
    $(this).parents('ul').prev().prop('checked', sibs);
});

jsFiddle example

Latest update handles up and down the hierarchy, and siblings.

Answer 5

Just use jquery.parents(). It is somewhat similar to find() except it searches all parents. Something like this might be close to what you are looking for:

$(this).parents('li').each(function() {
  $(this).children('input').prop('checked', true);
});

See http://api.jquery.com/parents/ for more information.

EDIT: Alright, here is a solution that works:

http://jsfiddle.net/3y3Pb/12/

EDIT2: And a more streamlined solution here:

http://jsfiddle.net/3y3Pb/14/