一个简单的列表全选功能

描述

一个简单的列表的全选功能

html代码

<div class="wrap">
        <label class="allCheck" >
            <input type="checkbox" id="check_all">
            <span class="all-span"> span>
            <span class="span-button">全选span>
        label>
        <div class="check-box">
            <label>
                <input type="checkbox" name="check" class="check_one">
                
                <div class="person-list">
                    <p class="full">
                        <span>昵称：span>
                        <span>45646span>
                    p>
                    <p class="full">
                        <span>会员手机：span>
                        <span>1234567984546span>
                    p>
                    <p class="full">
                        <span>状态：span>
                        <span>正常span>
                    p>
                div>
            label>
            <label>
                <input type="checkbox" name="check" class="check_one">
                
                <div class="person-list">
                    <p class="full">
                        <span>昵称：span>
                        <span>45646span>
                    p>
                    <p class="full">
                        <span>会员手机：span>
                        <span>2019-03-23span>
                    p>
                    <p class="full">
                        <span>状态：span>
                        <span>2019-03-23span>
                    p>
                div>
            label>
        div>
div>

css代码

.wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}
.allCheck{
    display: flex;
    align-items: center;
    margin-top:1rem ;
    width: 95%;
}
.allCheck input[type="checkbox"]{
    display: none;
}
//未选中状态
.allCheck input[type="checkbox"]+.all-span{
    flex: 0 0 1.5rem;
    height: 1.5rem;
    background-image:url(../image/payment_select.png);
    background-size: 100% 100%;
}
//选中状态
.allCheck input:checked + .all-span{
    background-image:url(../image/payment_selected.png);
}
.allCheck .span-button{
    color: #999;
    font-size: 1rem;
}
.check-box{
    width: 95%;
    margin-top: 1rem;
}
.person-list .full{
    flex: 1 1 auto;
    margin-right: 0.3rem;
    /* padding-bottom: 1rem; */
    padding: 0.5rem 0;
    display: flex;
    flex-wrap: wrap;
    color: #999;
}
.person-list .full span:first-child{
    flex: 0 0 25%;
}
.check-box label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #fff;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
}
.check-box label .person-list{
    flex: 1 1 auto;
    padding: 0.3rem;
    border-radius: 0.3rem;
    box-sizing: border-box;
}
.check-box label input[type="checkbox"]{
    display:none;
}
.check-box label input:checked+.person-list{
    background-color: rgba(0,125,255,.8);
    color: #fff;
}
.check-box label input:checked+.person-list .full{
    color: #fff;
}

js代码

        // 获取全选按钮
        var check_all = document.getElementById("check_all");
        // 获取其他按钮列表
        var checkItem = document.getElementsByClassName("check_one");
        //  为全选按钮绑定单击事件
        check_all.onclick = function () {
            // 遍历其他按钮
            for (var i = 0; i < checkItem.length; i++) {
                // 使每一个其他按钮的状态跟随全选按钮
                checkItem[i].checked = this.checked;
            }   
        }
        // 遍历其他按钮
        for (var i = 0; i < checkItem.length; i++) {
            // 为每一个其他按钮绑定单击事件
            checkItem[i].onclick = function () {
                // 遍历其他按钮
                for (var j = 0; j < checkItem.length; j++) {
                    // 如果有任何一个按钮未被选中
                    if (checkItem[j].checked == false) {
                        // 全选按钮不选中
                        check_all.checked = false;
                        // 跳出循环
                        break;
                    }
                    // 如果遍历结束后仍未break跳出循环，说明其他按钮全被选中，就选中全选按钮
                    check_all.checked = true;
                }
            }
        }

注：全选按钮旁边没有显示是因为图片路径的问题

那是因为css样式中的全选按钮选中样式图片以及未选中样式图片文件的路径问题，只要把图片路径修改为自己本地的路径即可。

大致逻辑为，单个选项是进行遍历绑定事件的，当触发事件时会对全选按钮进行一个判断，而全选的实现是也是将选项进行遍历，然后将状态进行更改