19-2-自定义复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: "Microsoft YaHei", serif;
        }

        body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
            margin: 0;
        }

        ol, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            border: none
        }
        #wrap{
            width: 300px;
            padding-top: 20px;
            margin: 50px auto;
            border:1px solid #bbb;
            border-radius: 15px;
            user-select: none;
        }
        #wrap ul.list li{
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            background-image: url("img/checked1.png");
            background-repeat: no-repeat;
            background-size: 30px;
            background-position: 5px;
            text-indent: 70px;
            cursor: pointer;
            color: #fff;
        }
        #wrap ul.list li.click{
            background-image: url("img/checked2.png");
            text-indent: 50px;
        }
        #wrap .btn{
            overflow: hidden;
            width: 100%;
            height: 50px;
        }
        #wrap .btn p{
            float: left;
            line-height: 50px;
            margin-left: 50px;
            background-image: url("img/checked1.png");
            background-repeat: no-repeat;
            background-size: 30px;
            background-position: 0;
            text-indent: 45px;
            font-size: 14px;
            cursor: pointer;
        }
        #wrap .btn p.click{
            background-image: url("img/checked2.png");
        }
    </style>
</head>
<body>
<div id="wrap">
    <ul class="list">
        <!--<li>项目一</li>-->
        <!--<li>项目二</li>-->
    </ul>
    <div class="btn">
        <p class="all">全选</p>
        <p class="fan">反选</p>
    </div>
</div>
<script>
    (function (data) {
        let oUl = document.querySelector("#wrap .list");
        let aLi = oUl.getElementsByTagName("li");
        let oAll = document.querySelector("#wrap .btn .all");
        let oFan = document.querySelector("#wrap .btn .fan");
        let len = data.length;


        new Image().src = "img/checked2.png";
        //解决图片加载问题  提前加载图片  点击时加载图片如果请求慢的话会暂时空白

        // num发生变化后必须要做的事情
        function ifFullNum() {
            oAll.classList[num===len?"add":"remove"]("click");
            // if (num === len) {
            //     oAll.classList.add("click");
            // }else {
            //     oAll.classList.remove("click");
            // }
        }

        // 通过数据生成html结构
        (function () {
            let html="";
            let color = ["#000","#555","#aaa"];
            let colorLen = color.length;
            for (let i=0;i<len;i++){
                html += `<li style="background-color:${color[i%colorLen]}">${data[i].TXT}</li>`;
            }
            console.log(html);
            oUl.innerHTML = html;
        })();


        //给Li添加点击事件
        (function () {
            let num = 0;
            for (let i=0;i<len;i++) {
                aLi[i].onclick = function () {
                    // 切换选中状态
                    this.classList.toggle("click");

                    // this.classList.contains("click");
                    // // 检测是否包含这个属性名字，返回bool

                    if (this.classList.contains("click")) {
                        num ++;
                    }else{
                        num --;
                    }

                    // 判断num是否全部被选中

                    if(num===len){
                        oAll.classList.add("click");
                    }else{
                        oAll.classList.remove("click")
                    }

                    // 全选和反选

                    (function () {
                        // 全选的点击
                        oAll.onclick = function () {
                            this.classList.toggle("click");
                            // 判断被点击之后的选中状态

                            let bool = this.classList.contains("click");
                            let attr = bool?"add":"remove";
                            for (let i=0;i<len;i++){
                                aLi[i].classList[attr]("click");
                            }
                            num = bool?len:0;
                            // if (this.classList.contains("click")){
                            //
                            //
                            //     for (let i=0;i<len;i++){
                            //         aLi[i].classList.add("click");
                            //     }
                            //     num = len;
                            //
                            //
                            // }else{
                            //
                            //
                            //     for (let i=0;i<len;i++){
                            //         aLi[i].classList.remove("click");
                            //     }
                            //     num = 0;
                            //
                            //
                            // }
                        };

                        // 反选的点击
                        oFan.onclick = function () {
                            for (let i=0;i<len;i++){
                                aLi[i].classList.toggle("click");
                            }
                            num = len-num;
                        }
                    })();

                }
            }
        })();


    })(
        //假设这个数据是后台给的数据
        [
            {
                TXT:"项目1",
                //在每一项中可能还有其他数据
            },
            {
                TXT:"项目2",
            },
            {
                TXT:"项目3",
            },
            {
                TXT:"项目4",
            },
            {
                TXT:"项目5",
            },
            {
                TXT:"项目6",
            },
            {
                TXT:"项目7",
            },
            {
                TXT:"项目8",
            },
        ]
    );


</script>
</body>
</html>
19-2-自定义复选框

猜你喜欢
