起始界面:

代码元素:
  <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+" ");
        }运行结果:




















