选中/取消选中所有子复选框 jquery 引导程序

Check/uncheck all child checkboxes jquery bootstrap

本文关键字:复选框 jquery 引导程序 取消 选中      更新时间:2023-09-26

关于这个小提琴(http://jsfiddle.net/7uR2B/),我有与这个小提琴相同的功能,即选中/取消选中所有子复选框,并且它像现在一样工作正常。

但是当我在我的表单中使用它并在引导下创建的表单时,它又将其他 DIVSPAN 添加到复选框中,而这个小提琴脚本对于引导复选框不起作用。 请帮助我选中/取消选中所有子框。

$('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 示例代码很酷,它以很酷的方式使用递归循环来获取父元素:-)