利用checkbox自带属性indeterminate构建含部分选中状态的树状结构

本来上个月就像发的，但是一直忙啊忙的也没时间整理，所以拖到了现在。

好吧上面这句就是废话，我就是感概下。下面是正文。

前段时间在弄一个轻量级的web项目，要构建一个树状结构目录，同时希望能把部分选中的状态给表现出来。项目中只用了jquery，个人也不想再引入一些其他的js框架或者插件，一个是考虑到界面展示的样式效果会不一样，另外就是懒得去研究啦。

话不多说，直接上测试图片和代码。

Ps：我代码里还含有一些设置css以及属性等代码，需要参考的朋友请自动忽略。博文结尾处有我当时找到参考的外国网站上的原文链接。

/* 监听checkbox选择事件，勾选时自动勾选上下级选项 */
    $("#select-tree-org").on("click", "input[type='checkbox']", function() {
        var checked = $(this).prop("checked"),
            container = $(this).parent();

        container.find('input[type="checkbox"]').prop({
            indeterminate: false,
            checked: checked
        }).removeClass('indeterminate');

        function checkSiblings(el) {
            var parent = el.parent().parent(),
                all = true;

            el.siblings().each(function() {
                return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
            });

            if (all && checked) {

                parent.children('input[type="checkbox"]').prop({
                    indeterminate: false,
                    checked: checked
                }).removeClass('indeterminate');

                checkSiblings(parent);
            } else if (all && !checked) {

                parent.children('input[type="checkbox"]').prop("checked", checked).removeClass('indeterminate');
                parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
                checkSiblings(parent);

            } else {

                el.parents("li").children('input[type="checkbox"]').prop({
                    indeterminate: true,
                    checked: false
                }).addClass('indeterminate');

            }

        }

        checkSiblings(container);
    });

原文博主中有测试代码及链接：https://css-tricks.com/indeterminate-checkboxes/