Check/uncheck all child checkboxes jquery bootstrap

Question

With reference to this fiddle ( http://jsfiddle.net/7uR2B/ ), I've same functionality like this fiddle that is check/uncheck all child checkboxes and it is working fine as now it is.

But when i used this into my form and my form created under bootstrapvthen it other DIV and SPAN added to checkboxes and this fiddle script doesn't work more for bootstrap checkboxes.` Please help me regarding this to check/uncheck all child boxes.

 $('li :checkbox').on('click', function () { var $chk = $(this), $li = $chk.closest('li'), $ul, $parent; if ($li.has('ul')) { $li.find(':checkbox').not(this).prop('checked', this.checked) } do { $ul = $li.parent(); $parent = $ul.siblings(':checkbox'); if ($chk.is(':checked')) { $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0) } else { $parent.prop('checked', false) } $chk = $parent; $li = $chk.closest('li'); } while ($ul.is(':not(.someclass)')); });$('li :checkbox').on('click', function () { var $chk = $(this), $li = $chk.closest('li'), $ul, $parent; if ($li.has('ul')) { $li.find(':checkbox').not(this).prop('checked', this.checked) } do { $ul = $li.parent(); $parent = $ul.siblings(':checkbox'); if ($chk.is(':checked')) { $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0) } else { $parent.prop('checked', false) } $chk = $parent; $li = $chk.closest('li'); } while ($ul.is(':not(.someclass)')); }); 

 <ul> <li> <div class="checker"> <span><input type="checkbox"></span> </div>Administration <ul> <li> <div class="checker"> <span class="checked"><input type="checkbox"></span> </div>President <ul> <li> <div class="checker"><span><input type="checkbox"></span> </div>Manager 1 <ul> <li> <div class="checker"><span><input type="checkbox"></span> </div>Assistant Manager 1</li> <li> <div class="checker"><span><input type="checkbox"></span> </div>Assistant Manager 2</li> <li> <div class="checker"><span><input type="checkbox"></span> </div>Assistant Manager 3</li> </ul> </li> <li> <div class="checker"><span><input type="checkbox"></span> </div>Manager 2</li> <li> <div class="checker"><span><input type="checkbox"></span> </div>Manager 3</li> </ul> </li> <li> <div class="checker"><span><input type="checkbox"></span> </div>Vice President <ul> <li> <div class="checker"><span><input type="checkbox"></span> </div>Manager 4</li> <li> <div class="checker"><span><input type="checkbox"></span> </div>Manager 5</li> <li> <div class="checker"><span><input type="checkbox"></span> </div>Manager 6</li> </ul> </li> </ul> </li> </ul> 

Screenshot of my form [a link] http://awesomescreenshot.com/0f549oknaf

Answer 1

your Bootstrap version wasn't working, because the checkbox items are located in different place relative to the ul element ( $ul = $li.parent(); ) that is used for searching the item. Your Bootstrap version:

  <div class="checker"> 
      <span class="checked">
          <input type="checkbox">
       </span>
  </div>President
  <ul>...

The original Fiddle version:

   <input type="checkbox" />President
   <ul>

I changed your Fiddled code slightly to take into consideration your changed element location in your Bootstrap version:

 do {
    $ul = $li.parent();
    //$parent = $ul.siblings(':checkbox'); old code
    $parent = $ul.siblings('.checker');
    if ($chk.is(':checked')) {
        $parent.find(':checkbox').prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
    } else {
        $parent.find(':checkbox').prop('checked', false)
    }
    $chk = $parent;
    $li = $chk.closest('li');
} while ($ul.is(':not(.someclass)')); 

The working sample can be found at Bootply Fiddle .

Btw, your original Fiddle sample code was cool, it used a recursive loop in cool way to obtain parent elements :-)