JS(JavaScript)中如何实现，复选框checkbox多选功能

 起始界面：

代码元素：

  <p><input type="checkbox" id="checkedAll"> 全选按钮</p>
    <p><input type="checkbox" class="cl"> 选项1</p>
    <p><input type="checkbox" class="cl">选项2</p>
    <p><input type="checkbox" class="cl">选项3</p>
    <p><input type="checkbox" class="cl">选项4</p>

实现多选功能：

    <script>
        var checkedAll = document.getElementById('checkedAll');
        var optionList = document.querySelectorAll('.cl');
        checkedAll.onchange = function () {
            for (var i = 0; i < optionList.length; i++) {
                optionList[i].checked = checkedAll.checked;
            }
        };
        for (let i = 0; i < optionList.length; i++) {
            optionList[i].onclick = function(){
                checkedAll.checked = Array.from(optionList).every(function(item){
                    return item.checked;
                })
            }
            
        }
    </script>

 注意：

当我们通过querySelectorAll()获取的类元素是一个伪数组，因此我们需要将其转化为真正的数组

Array.from(arr):将其转为数组

arr.every(function(item){
    return item.checked;
}

 以上代码指的是，数组中任何一个元素(item)，都被选中；

例子：

        var arr = [12, 48, 56, 3, 25, 60];
        // var flag = arr.every(function (item) {
        //     return item > 2;
        // })
        var flag = arr.every((item) => {
            return item > 2;
        })
        console.log(flag);

arr.every()返回的是一个boolean值，指的是每一个元素都大于2，返回true；

        var arr = [12, 48, 56, 3, 25, 60];
        // var flag = arr.some(function (item) {
        //     return item > 50;
        // })
        var flag = arr.some((item) => {
            return item > 50;
        })
        console.log(flag);

arr.every()返回的是一个boolean值，指的是只要有一个元素大于50，返回true；

        var arr = [12, 48, 56, 3, 25, 60];
        var newArr = [];
        // var newArr = arr.filter(function (item) {
        //     return item > 50;
        // })
        var newArr = arr.filter((item) => {
            return item > 30;
        })
        for (const element of newArr) {
            console.log(element+" ");
        }

arr.filter()返回的是一个数组，是一个过滤器，指的是返回数字大于30的数组元素；

        var arr = [12, 48, 56, 3, 25, 60];
        var newArr = [];
        // var newArr = arr.filter(function (item) {
        //     return item > 50;
        // })
        var newArr = arr.filter((item) => {
            return item > 30;
        })
        for (const element of newArr) {
            console.log(element+" ");
        }

运行结果：