选中/取消选中所有子复选框 jquery 引导程序
Check/uncheck all child checkboxes jquery bootstrap
关于这个小提琴(http://jsfiddle.net/7uR2B/),我有与这个小提琴相同的功能,即选中/取消选中所有子复选框,并且它像现在一样工作正常。
但是当我在我的表单中使用它并在引导下创建的表单时,它又将其他 DIV 和 SPAN 添加到复选框中,而这个小提琴脚本对于引导复选框不起作用。 请帮助我选中/取消选中所有子框。
$('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();
) 位于不同的位置。您的引导程序版本:
<div class="checker">
<span class="checked">
<input type="checkbox">
</span>
</div>President
<ul>...
原始小提琴版本:
<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 示例代码很酷,它以很酷的方式使用递归循环来获取父元素:-)
相关文章:
- 如何选中复选框jquery
- 基于复选框 Jquery 更新文本框
- 复选框组获取选中复选框jquery的值
- 自定义CSS复选框jQuery诱导的“;“已检查”;属性不't在视觉上”;“检查”;复选框
- 多复选框jquery计算
- 如何使用复选框jQuery取消选中并刷新数据
- 选中/取消选中所有子复选框 jquery 引导程序
- 不要禁用选中的复选框 jQuery
- 使用“下拉列表多选复选框”(jquery)创建动态表
- 点击链接时勾选复选框 - jquery
- 轻松限制选中的复选框 jquery UI
- 显示/隐藏嵌套复选框-jQuery
- 使用选中父复选框.jQuery
- 事件处理复选框-jQuery icheck插件
- 多个复选框jquery手动点击复选框触发,但代码点击'一个没有# 39;t
- 复选框jQuery出现意外响应
- 动态地生成/删除文本输入与复选框jQuery
- :空白选择器不工作复选框jQuery Validate()
- 如何对选中的值求和更改复选框jquery
- 复选框jquery或javascript oncheck