全选功能的实现（将类数组转化为数组，利用every实现）

妖狐艹你老母 2022-05-12 05:40 171阅读 0赞

就是一个小小的全选功能的实现，主要是利用类数组转为真正的数组，然后利用数组的every方法，实现的一个全选的功能 。

比较简单，直接看例子（完整的代码）：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全选按钮功能的实现</title>
    </head>
    <body>
    <div id="box">
        <input type="checkbox" name="donna"/>苹果
        <input type="checkbox" name="donna"/>橘子
        <input type="checkbox" name="donna"/>香蕉
        <input type="checkbox" id="all"/>全选
    </div>
    <script>
        var oBtn = document.querySelectorAll('input[name="donna"]');
        var allChecked = document.querySelector('#all')
    //    将类数组转化为真正的数组
        for(let i=0;i<oBtn.length; i++){
            oBtn[i].onclick = function(){
                allChecked.checked =  [...oBtn].every((item)=>{
                    return item.checked
                })
            }
        }
    </script>
    </body>
    </html>

总结一下将类数组转化为真正的数组的方法

比如有类数组  arrayLike

*  我上面用到的ES6新增的扩展运算符的方法 var newArray =   \[...arrayLike\]
 *  ES6新增的var newArray = Array.from(arrayLike)//但这种方法有很大的兼容性问题，所以一般不建议使用
 *  var newArray = Array.prototype.slice.call(arrayLike)   //因为是类数组，所以是不能使用数组下的方法的，所以这里我们用的是数组原型下的slice方法。（call 调用一个对象的一个方法，用另一个对象替换当前对象）

常见的类数组有：

*  在浏览器环境中，document.getElementsByTagName()语句返回的就是一个类数组对象。
 *  在function调用中，function代码内的arguments变量(保存传入的参数)也是一个类数组对象。
 *  在ECMAScript 5标准中，字符串string就是一个只读的类数组对象