.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);   }); });        
Comments
Post a Comment