2

I want to check all the child input of list when parent input [checkbox] is checked.

<dd id="space_content">
<ul>
    <li parent-id="0" li-id="16"><input type="checkbox" value="16"/>Anthropology Department 
    <ul>
        <li parent-id="16" li-id="18"><input type="checkbox" value="18"/>Anthropology Faculty Collections
        </li>
        <li parent-id="16" li-id="23"><input type="checkbox" value="23"/>Shared Collections</li>
    </ul>
</li>
    <li parent-id="0" li-id="45"><input type="checkbox" value="45"/>Center for asdf on Vermont</li>
<li parent-id="0" li-id="19"><input type="checkbox" value="19"/>Center for Research on Vermont
    <ul>
        <li parent-id="19" li-id="24"><input type="checkbox" value="24"/>Collections for Testing
            <ul>
               <li parent-id="24" li-id="25"><input type="checkbox" value="25"/>Geology Department
                </li> 
            </ul>
        </li>
    </ul>
</li>
</ul>
</dd>

So far this is what I did but could not go any further.

$(function(){    
    $("#space_content > ul > li > input").click(function(){

       if($(this).is(':checked')){
           var $parent = $("#space_content > ul > li").children("ul");
           if($parent.has('input')){
               $parent.children('input').attr('checked','checked');
           }

        }
    }); 
});
2

7 Answers 7

1

Try

$(function () {
    $("#space_content > ul input").click(function () {
        $(this).next('ul').find('input').prop('checked', this.checked)
    });
});

Demo: Fiddle

1

You should use .change() event instead of .click() for input elements as well as using .prop() instead of .attr() to set the checked state of your checkbox. You can shorten your code to:

$(function(){    
    $("#space_content > ul > li > input").change(function(){    
        $(this).next().find('input').prop('checked', this.checked);
    }); 
});

Fiddle Demo


If you got problem with .change() event in old browser such as IE8, you can use .click() instead:

$(function(){    
    $("#space_content > ul > li > input").click(function(){    
        $(this).next().find('input').prop('checked', this.checked);
    }); 
});
4
  • couldn't disagree more. .change() doesn't fire until focus is lost on the checkbox in IE8. .click() is the most appropriate for a checkbox.
    – Bryan
    Apr 3, 2014 at 5:42
  • jsfiddle doesn't even work for me in ie8 mode. But I know for a fact .change() doesn't fire until you click somewhere else after clicking the checkbox in IE8. I had an issue with this last week. If it works for you that's an exception not a rule and your information is going to lead someone to a problem. If you have a good reason to use change instead of click on a checkbox i'd love to hear it.
    – Bryan
    Apr 3, 2014 at 5:49
  • @Bryan Ok, I've added your suggestion.
    – Felix
    Apr 3, 2014 at 5:51
  • Don't mean to be a prick about it, just I had an issue that took me a while to figure out. Don't want others to experience the same issue. thanks for including it.
    – Bryan
    Apr 3, 2014 at 5:52
1

You can use next() to get the next ul and find checkboxes in it and assign the current checkbox status to them. As you have checkboxes it better to go for them instead of input for being specific. Also use change event instead of click.

Live Demo

$(function(){    
    $("#space_content > ul > li :checkbox").change(function(){    
      $(this).next('ul').find(':checkbox').prop('checked', this.checked);
    }); 
});
2
  • this is not working when clicking on node Collections for Testing
    – Usman
    Apr 3, 2014 at 5:58
  • Thanks @Usman, This was due to selector for binding the event, check it now.
    – Adil
    Apr 3, 2014 at 6:04
0

I guess this is what you wanted..I have sample code for your need

   $(".pc-box").click(function() {
        if (this.checked) {
            $(this).closest("li").find(".cc-box").prop("checked", true);
            $(this).parent().fadeOut();
        }  
    });

Demo :-

http://jsfiddle.net/mrc4N/9/

0

if u go thru a Jquery you can do this simple For this you need to add jquery lib

$(function () {
    $("#space_content > ul input").click(function () {

        $(this).next('ul').find('input').prop('checked', this.checked);

    });
});

Here is jsbin exmple

0

Try this,

$(function(){    
    $("#space_content > ul > li > input").click(function(){
      $(this).siblings().find(':checkbox').attr('checked', this.checked);
    }); 
});

Live Demo

0

Try this...

FIDDLE

$(function(){    
    $("#space_content > ul > li > input").click(function(){

       if($(this).is(':checked')){
           $(this).next('ul').find(':checkbox').prop('checked', this.checked);


        }
        else
        {
             $(this).next('ul').find(':checkbox').prop('checked', '');
        }
    }); 
});

this will check all the child checkboxes and uncheck as well

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.