原生js实现下拉多选框组件

    
    
    
    
    
    



    

        
        

            
            
            

                
666
                
777
                
333
            
        
        
        

            


            
        
    
    

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
.box {
    width: 300px;
    position: relative;
    top: 50px;
    left: 50px;
}
.top {
    height: 45px;
    display: flex;
    position: relative;
}
.top input {
    width: 300px;
    height: 45px;
    font-size: 25px;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid #d1ccd0;
    outline: none;
}
.top .blue {
    border: 2px solid #409eff;;
}
.top .size {
    width: 16px;
    height: 16px;
    position: relative;
    top: 50%;
    left: -30px;
    margin-top: -8px;
    transform: rotate(180deg);
    transition: all .5s;
    color: #d1ccd0;
}
.top ul {
    position: absolute;
    display:flex;
    font-size: 10px;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;

}
.top ul li {
    background-color: #409eff;
    color: #fff;
    padding: 1px 10px;
    margin-left: 3px;
    border-radius: 5px;
    display: none;
}
.list {
    width: 300px;
    height: 230px;
    border-radius: 5px;
    margin-top: 5px;
    background-color:#fff;
    border: 1px solid #d1ccd0;
    box-shadow: 0px 0px 5px 0px #aaa;
    display: none;
    /* 超出隐藏，需要时加滚动条*/
    overflow: auto;
}
/* 隐藏滚动条 */
.list::-webkit-scrollbar {
    display: none;
}
.list ul {
    display: flex;
    flex-direction: column;
    margin: 8px 0;
}
.list ul li {
    display: flex; 
    height: 27px;
    align-items: center;
    padding: 0 20px;
    color: #65676b;
    cursor: pointer;
}
.list ul li:hover {
    background-color: #f5f8ff;
}
.list ul li label {
    font-size: 10px;
    margin-left: 15px;
    display: block;
    width: 100%;
}
.fontBlue {
    color: #0075ff;
}

// 获取整体大盒子元素
let box = document.querySelector('.box')
// 获取输入框元素
let input = document.querySelector('#input1')
// 获取字体图标元素
let round = document.querySelector('.top .size')
// 获取下拉列表
let list = document.querySelector('.list')
// 鼠标进入
box.addEventListener('mouseenter', function () {
    // 显示下拉列表
    list.style.display = 'block'
    // 外框线变色
    input.classList.add('blue')
    // 图标旋转
    round.style.transform = 'rotate(0deg)'
})
// 鼠标离开
box.addEventListener('mouseleave', function () {
    // 隐藏下拉列表
    list.style.display = 'none'
    // 外框线颜色恢复
    input.classList.remove('blue')
    // 图标恢复
    round.style.transform = 'rotate(180deg)'
})
// 获取元素ul
let ul = document.querySelector('.list-ul')
// 新建数组对象
let optionArr = [
    {
        id: 'l1',
        name: '全部'
    },
    {
        id: 'l2',
        name: '鱼香肉丝'
    },
    {
        id: 'l3',
        name: '宫保鸡丁'
    },
    {
        id: 'l4',
        name: '西红柿炒鸡蛋'
    },
    {
        id: 'l5',
        name: '五彩水饺'
    },
    {
        id: 'l6',
        name: '清蒸鲈鱼'
    },
    {
        id: 'l7',
        name: '红烧茄子'
    },
    {
        id: 'l8',
        name: '土豆烧牛肉'
    },
    {
        id: 'l9',
        name: '麻婆豆腐'
    },
    {
        id: 'l10',
        name: '糖醋里脊'
    }
]
// 新建小li，追加到ul中，通过循环遍历渲染完成
for (let i = 0; i < optionArr.length; i++) {
    // 有几条数据就新建几个小li
    let li = document.createElement('li')
    // 新建复选框及label元素
    let input1 = document.createElement('input')
    let label = document.createElement('label')
    // 修改表单属性为复选框
    input1.type = 'checkbox'
    // 给表单添加id属性
    input1.id = `${optionArr[i].id}`
    // 给第一个li的input和label设置class属性，其他的li设置相同的input和label设置class属性
    if (i === 0) {
        input1.setAttribute("class", 'all');
        label.setAttribute("class", 'sp');
    } else {
        input1.setAttribute("class", 'check');
        label.setAttribute("class", 'wz');
    }
    // 给label修改文字内容，值为对象的name属性值
    label.innerText = `${optionArr[i].name}`
    // 给label设置for属性，值为对象的id属性值
    label.setAttribute("for", `${optionArr[i].id}`);
    //复选框及label元素追加给li
    li.appendChild(input1)
    li.appendChild(label)
    // 将li追加给ul
    ul.appendChild(li)
}
// 选中的数组
let chooseArr = []
let cks = document.querySelectorAll('.top ul .change')
let arr1 = document.querySelector('.top ul .arr1')
/* let lis = document.querySelectorAll('.list ul li') */
// 获取刚才新建的所有class为check的复选框
let checkboxs = document.querySelectorAll('.list ul li .check')
// 获取刚才新建的所有class为wz的label
let labels = document.querySelectorAll('.list ul li .wz')

let tag1 = cks[0]
let tag2 = cks[1]
let k = 0
// 循环遍历所有li,添加点击事件
for (let i = 0; i < checkboxs.length; i++) {
    // +1是因为li的伪数组长度比checkboxs和checkboxs大1
    checkboxs[i].addEventListener('click', function () {
        updateCheckStatus()
    })
}

// 获取新建的class为all的复选框
let all = document.querySelector('.list ul li .all')
// 获取新建的class为sp的label
let sp = document.querySelector('.list ul li .sp')
// 全部按钮
all.addEventListener('click', function () {
    checkAll()
    updateCheckStatus()
})
function updateCheckStatus() {
    // let count = 0
    let arr = []
    // 是否全选，默认认为全选
    let isCheckAll = true
    for(let i=0;i 0) {
        arr1.style.display = 'block'
        tag1.style.display = "block"
        tag1.innerHTML = arr[0]
        console.log(tag1);
        if(arr.length>1) {
            tag2.style.display = "block"
            tag2.innerHTML = arr[1]
            console.log(tag2);
        }else {
            tag2.style.display = "none"
        }
    }else {
        arr1.style.display = 'none'
        tag1.style.display = "none"
        tag2.style.display = "none"
    }

    arr1.innerHTML = `+${arr.length}`
}

function checkAll() {
    sp.classList.add('fontBlue')
    // 取消复选框选中，字体颜色恢复
    if (all.checked === false) {
        sp.classList.remove('fontBlue')
    }
    for (let i = 0; i < checkboxs.length; i++) {
        // 全选操作
        console.log(all.checked);
        checkboxs[i].checked = all?.checked
    }
}