jquery复选框思路

复选框的思路

复选框的主要问题就是多个框以及父子框之间的联系以及因果关系,然后编写时有两个思路。

先暂写一个思路一，剩下的下次再补

---

源码

   <ul id="tree">
    <li><input type="checkbox" value="1">1
        <ul>
            <li>
                <input type="checkbox" value="1">2
                <ul>
                    <li><input type="checkbox" value="1">3
                        <ul>
                            <li><input type="checkbox" value="1">4
                                <ul>
                                    <li><input type="checkbox" value="1">5</li>
                                    <li><input type="checkbox" value="1">5</li>
                                    <li><input type="checkbox" value="1">5</li>
                                </ul>
                            </li>
                            <li><input type="checkbox" value="1">4</li>
                            <li><input type="checkbox" value="1">4</li>
                            <li><input type="checkbox" value="1">4</li>
                        </ul>
                    </li>
                    <li><input type="checkbox" value="1">3
                        <ul>
                            <li><input type="checkbox" value="1">4</li>
                        </ul>
                    </li>
                    <li><input type="checkbox" value="1">3</li>
                    <li><input type="checkbox" value="1">3</li>
                    <li><input type="checkbox" value="1">3</li>
                </ul>
            </li>
            <li>
                <input type="checkbox" value="1">2
                <ul>
                    <li><input type="checkbox" value="1">3
                        <ul>
                            <li><input type="checkbox" value="1">4
                                <ul>
                                    <li><input type="checkbox" value="1">5</li>
                                    <li><input type="checkbox" value="1">5</li>
                                    <li><input type="checkbox" value="1">5</li>
                                </ul>
                            </li>
                            <li><input type="checkbox" value="1">4</li>
                            <li><input type="checkbox" value="1">4</li>
                            <li><input type="checkbox" value="1">4</li>
                        </ul>
                    </li>
                    <li><input type="checkbox" value="1">3
                        <ul>
                            <li><input type="checkbox" value="1">4</li>
                        </ul>
                    </li>
                    <li><input type="checkbox" value="1">3</li>
                    <li><input type="checkbox" value="1">3</li>
                    <li><input type="checkbox" value="1">3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

---

js

 <script src="js/jquery.min.js"></script>
<script>
    //该代码接受无限下级复选框，但是需要计算第二级复选框的父级位置
    $("input:checkbox").click(function () {
        let alllength = $(this).parents().length - 6
        // console.log("当前所有父级",$(this).parents())
        if ($(this).prop("checked") == true) {
            $(this).parents().children("input:checkbox").prop("checked", true); //点击后所有父元素被选中
            $(this).parent("li").find("input:checkbox").prop("checked", true); //点击后所有子元素被选中
        } else {
            // console.log($(this).parent().siblings("li").children("input[type='checkbox']:checked").length)
            //当前点击框的兄弟元素有多少个被选中
            if ($(this).parent().siblings("li").children("input[type='checkbox']:checked").length == 0)
            //判断其他兄弟选框是否被选中
            {
                if ($(this).parents().eq(alllength).siblings("li").children(
                        "input[type='checkbox']:checked").length == 0 && $(this).parents("li").find(
                        "input[type='checkbox']:checked").length == 0)
                //判断父级的兄弟的选框中是否存在选中
                {
                    $(this).parents().children("input:checkbox").prop("checked", false)
                    $(this).parent("li").find("input:checkbox").prop("checked", false);
                } else {
                    $(this).parent("li").find("input:checkbox").prop("checked", false);
                    $(this).parent().parent().siblings("input:checkbox").prop("checked", false)
                }
            } else {
                $(this).parent("li").find("input:checkbox").prop("checked", false);
            }
            if ($(this).parents("li").find("input[type='checkbox']:checked").length == 1) {
                $(this).parents("li").find("input[type='checkbox']:checked").prop("checked", false)
            }

        }
    })
</script>

注：该代码功能，可实现点击子框，所有父框都被选中，点击单一且有子的框时也可以做到全选子元素和直系父框，目前缺点：可添加下级复选框，然需要计算第二级复选框的位置信息，同时，单选取消子元素时，只有第一级直系父框会一并取消，其他直系父元素无反应，此代码缺陷不少，但复选框的思路相对完善，可供参考购物车类项目思路。
拓展：复选框的选中时影响其他选框相对简单，但是取消时与其他选框的逻辑结构相对繁琐，需要深入考虑。

思路二

复选框的第二个思路，这个思路就不太需要去考虑那么多了，简单来说就是zTree – jQuery 树插件，这个插件还是相对完善的，用法就简单记录一下，首先，自然是下载资源包，然后引入

 <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
 <script src="js/jquery.ztree.all.js"></script>  

然后就是配置setting

 var zNodes = []; //这个是节点数组
     var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false,
            showIcon: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },

        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: {
                "Y": "s",
                "N": "s"
            }  //这个是父子关系的影响，具体的话还是查文档
        },
    };
      $(function () {
        // show()
        zNodes = [{
                id: "200000",
                pId: "0",
                name: "4",
                checked: false
            },
            {
                id: "2000000",
                pId: "0",
                name: "1",
                checked: true
            }, {
                id: "400000",
                pId: "0",
                name: "2",
                checked: false
            }, {
                id: "3000000",
                pId: "0",
                name: "3",
                checked: false
            }, 
        ]

        $.fn.zTree.init($("#regionZTree"), setting, zNodes);
        zTree = $.fn.zTree.getZTreeObj("regionZTree");
    })  
        var lstMenu = []
    saveTreeBtn = function () {
        //保存选择菜单
        // zTree = $.fn.zTree.getZTreeObj("ztree");
        var nodes = zTree.getCheckedNodes(true);
        // $scope.editData.lstMenu=[{"id":"100000"}];
        lstMenu = [];
        for (var i = 0; i < nodes.length; i++) {

            console.log(nodes[i].id);
            lstMenu.push({
                "id": nodes[i].id
            })
        }
        console.log(lstMenu)
    }