原生js实现多选框全部选中和取消效果

html部分

<ul>
        <li>全选<input type='checkbox' id='all'></li>
        <li>Java<input type='checkbox' class='item'></li>
        <li>javaScript<input type='checkbox' class='item'></li>
        <li>C++<input type='checkbox' class='item'></li>
        <li>python<input type='checkbox' class='item'></li>
        <li>.net<input type='checkbox' class='item'></li>
    </ul>

javascript部分

    <script>

        const selectAll = document.querySelector('#all')
        const everyItem = Array.from(document.querySelectorAll('.item'))
        
        全部选中和全部取消
        selectAll.onchange = () => {
            everyItem.forEach(item => {
                item.checked = selectAll.checked
            })
        }

        // 单一项选中和取消
        everyItem.forEach(item =>{
            //每一个元素都绑定监听事件
            item.onchange = () => {
                // everyItem.every(v => v.checked) 每一项的v.checked都是true 说明返回值是true 否则是false
                selectAll.checked = everyItem.every(v => v.checked)
            }
        })