[英]Check/uncheck all child checkboxes jquery bootstrap
参照该小提琴( http://jsfiddle.net/7uR2B/ ),我具有与该小提琴相同的功能,即选中/取消选中所有子复选框,它现在可以正常工作。
但是,当我在表单中使用它并在bootstrapv下创建我的表单时,其他DIV和SPAN添加到了复选框,并且此小提琴脚本无法对bootstrap复选框起作用。
$('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>
我的表单的屏幕截图[链接] http://awesomescreenshot.com/0f549oknaf
您的Bootstrap版本无法正常工作,因为checkbox
项目相对于用于搜索项目的ul
元素( $ul = $li.parent();
)位于不同的位置。 您的Bootstrap版本:
<div class="checker">
<span class="checked">
<input type="checkbox">
</span>
</div>President
<ul>...
原始的Fiddle版本:
<input type="checkbox" />President
<ul>
我略微更改了Fiddled代码,以考虑到您在Bootstrap版本中更改的元素位置:
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)'));
工作样本可以在Bootply Fiddle中找到。
顺便说一句,您最初的Fiddle示例代码很酷,它以很酷的方式使用了递归循环来获取父元素:-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.