版权声明： https://blog.csdn.net/lhjuejiang/article/details/82707245
就是一个小小的全选功能的实现，主要是利用类数组转为真正的数组，然后利用数组的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就是一个只读的类数组对象