简单2级树实例

.div_inline {
	display:inline;
}
/* 设置子节点属性 */
.tree_node_child {
	margin-left:50px;
}

// 页面加载完成后调用
$(function() {
    $('.tree_node_parent_checkbox').click(function() {
        if ($(this).is(':checked')) {
            $(this).next('div').children().prop('checked', true);
        } else {
            $(this).next('div').children().prop('checked', false);
        }
    })
    // 为所有的子节点添加点击事件
    $('.tree_node_child_checkbox').click(function() {
        var length = $(this).parent().find('input:checkbox:checked').length;
        if (length > 0) {
            $(this).parent().prev().prop("checked", true);
        } else {
            if ($(this).is(':checked')) {
                $(this).parent().prev().prop("checked", true);
            } else {
                if ($(this).parent().prev().prop("checked", true)) {
                    $(this).parent().prev().prop("checked", false);
                }
            }
        }
    })

// 为所有的切换按钮添加点击事件
    $(".tree_node_toggle_button").click(function() {
        // 获取需要隐藏或显示的节点
        var $toggle_node = $(this).parent().next().find(".tree_node_child");
        $toggle_node.toggle(); // 切换隐藏或显示
        // 切换按钮的显示
        if ($toggle_node.is(":visible")) {
            $(this).val("-");
        } else {
            $(this).val("+");
        }
    });
    //为按钮绑定切换事件
    $('.tree_node_toggle_button').click(function() {
        var $toggle = $(this).parent().next().find('.tree_node_child_checkbox');
        //切换事件
        //$($toggle).toggle();
        //都可以，知识点为jquery 对象与dom对象区分
        $toggle.toggle();
        if ($toggle.is(':visible')) {
            $(this).val('+');
        }
    })
});

PROMULGATOR

yanyuhuan

相关代码

简单2级树实例

最新