Use JQuery to check a checkbox in a parent list-it

Question

I'm brand new to Javascript and JQuery, so I've been reading up on it and am trying to check (and set inactive) a checkbox in a parent list-item when one of the children are checked.

If this doesn't make any sense, take a look at the list structure.

<ul>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 1</li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 2
        <ul>
            <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 1</li>
            <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 2</li>
        </ul>
    </li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 3</li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 4</li>
</ul>

If Child 1 or Child 2 is checked, I want the input in Parent 2 to be checked and set inactive. I've started working on it, but got stuck here:

$(function(){
    $('.child').click(function() {
        $(this).parent().parent().parent().toggle();
    });
});

As you can see, I didn't make it far. Any help would be appreciated.

Thanks!

Answer 1

the .parent() method returns only the immediate parent DOM element of your current selector. The .parents() method will search up the DOM tree to find any parent elements that match the selection. So $(".bar").parents(".foo") would select for all parent elements with Class "foo" of any elements with class "bar".

First give your target parent element an identifable attribute, either a class or an id. If you were dealing with IDs, you wouldn't need parents(), so use a class.

$(".child").click(function(){
  $(this).parents('.parentclass').toggle();
});

Answer 2

Check this fillde

$("input:checkbox + ul input:checkbox").click(function(){
    var $ul = $(this).closest("ul");
    var $parent = $ul.prev("input:checkbox");
    if($ul.find("input:checkbox:checked").length > 0){
        $parent.attr("checked", "checked");
    }else{
        $parent.attr("checked", "");
    }
})

If you are using the id property for elements, you have to make sure that it has a unique value in the document.

Answer 3

Try this:

<script type="text/javascript">
$(function(){
    $('li ul input[type=checkbox]').click(function() {
                var that = $(this);
                var parentUL = that.parent().parent();
        var parentChk = parentUL.parent().find("input:first");
                var oneChecked = false;
                parentUL.find("input").each(function(){oneChecked = oneChecked || this.checked;});
                console.log(oneChecked);
                parentChk.attr("checked", oneChecked);
    });
});
</script>

Answer 4

Based on your posted markup, this will work:

$('ul > li ul li > :checkbox').change(function() {
    $(this).parents('li:last')
           .children("input")
           .attr("disabled", this.checked);
});

Also note:

• You have numeric and duplicate IDs, which are invalid.
• You do not have any class named 'child' in your document.
• .toggle "displays or hides matched elements". It does not toggle their 'disabled' property.

Try it here: http://jsfiddle.net/karim79/QfTfr/