.net - jquery selecting/unselecting checkboxes in children/parent <li> -

i have following

<ul>    <li>main     <ul>         <li><input type="checkbox" onclick="$.selectchildren(this);" /> parent 1            <ul>                <li><input type="checkbox" onclick="$.selectchildren(this);" />sub 1</li>                <li><input type="checkbox" onclick="$.selectchildren(this);" />sub 2                   <ul>                      <li><input type="checkbox" onclick="$.selectchildren(this);" />sub sub 2</li>                      <li><input type="checkbox" onclick="$.selectchildren(this);" />sub sub 3</li>                   </ul>                 </li>             </ul>          </li>         <li><input type="checkbox" onclick="$.selectchildren(this);" />parent 2</li>     </ul>    </li> </ul> 

now jquery function:

(function ($) {     $.selectchildren = function (element) {         if ($(element).is(':checked')) {             $(element).parent().find(':checkbox').attr('checked', true);         }         else {             $(element).parent().find(':checkbox').attr('checked', false);         }     } })(jquery); 

how unselect (all)parent checkboxes when un-checking child

for example: when clicked "sub sub 2" checkbox -> should uncheck "sub 2" , "parent 1" checkboxes well.

thanks

use .children() (to immediate children) instead of .find() (which looks everywhere below) on .parents() , example:

(function ($) {   $.selectchildren = function (element) {     $(element).parents().children(':checkbox').attr('checked', element.checked);   }; })(jquery); 

since you're passing boolean, can use .checked property directly well.

you can give try here, more traditional approach same effect this:

$(function() {   $(":checkbox").change(function () {     $(this).parents().children(':checkbox').attr('checked', this.checked);   }); }); 

you can give version try here.