Question

我正在使用Bootstrap Tree创建嵌套复选框列表（http://jhfrench.github.io/bootstrap-tree/docs/example.html），但是，我希望突出显示选中的项目，并在选择父项时突出显示子项。我已经开始工作了，但是现在当选择父母时，单个孩子的背景颜色在未选中时不会切换。即它只在未选择其父级时才切换。见jsfiddle：https://jsfiddle.net/tqku87ym/7/

$(function checkbox() {
    $("input[type='checkbox']").change(function () {
        $(this).siblings('ul')
            .find("input[type='checkbox']")
            .prop('checked', this.checked);

        $(this).parent('li').toggleClass("highlight");

    });
});

Answer 1

如果更改背景的方式可能来自多个来源，则无法切换课程。更改父级时，您必须清理子级。以下是修改的示例代码。 https://jsfiddle.net/wgpahro4/

$(function checkbox() {
    $("input[type='checkbox']").change(function () {
    $(this).siblings('ul')
        .find("input[type='checkbox']")
        .prop('checked', this.checked);

    //ADDED CODE STARTS HERE!!!!!!!!!!!
    //Clean up children
    if($(this).parent().hasClass("parent_li")){
        if(!this.checked){
           $(this).siblings("ul").find("li").removeClass("highlight");
        }
    }
    //ADDED CODE ENDS HERE!!!!!  

    $(this).parent('li').toggleClass("highlight");

    });
});

Answer 2

如果您希望每个子复选框都突出显示，而父复选框仍然可以覆盖，则类似这样的内容将起作用：

$(function checkbox() {
    $("input[type='checkbox']").change(function () {

        if ($(this).siblings('ul').length > 0) {
            var children = $(this).siblings('ul').find('input');
            children.prop('checked', this.checked).change();
        }
        else {
            var item = $(this).parent('li');
            this.checked ? item.addClass('highlight') : item.removeClass('highlight');
        }
    });
});

Answer 3

我已经用新的小提琴编辑了你的代码：https://jsfiddle.net/pjrzbbea/。

我为孩子们引入了一个单独的高亮课程，它的背景颜色与父母的背景颜色重叠。如果父元素被突出显示，JS部分现在也会从子元素中删除突出显示类 - 这样孩子就可以正确重置。

    $(function checkbox() {
    $("input[type='checkbox']").change(function () {
        var highlightChildClass = 'highlightChild';

        $(this).siblings('ul')
            .find('li')
            .removeClass(highlightChildClass)
            .find("input[type='checkbox']")
            .prop('checked', this.checked);

        var highlightClass = 'highlight';

        if ($(this).closest('ul[role="group"]').length > 0) {
            highlightClass = highlightChildClass;
        } 

        $(this).parent('li').toggleClass(highlightClass);
    });
});

使用jQuery切换复选框背景颜色

3 个答案: