首页 > 其他分享 >全选功能的实现(将类数组转化为数组,利用every实现)

全选功能的实现(将类数组转化为数组,利用every实现)

时间:2023-02-28 21:05:10浏览次数:58  
标签:arrayLike 将类 全选 every 数组 var


就是一个小小的全选功能的实现,主要是利用类数组转为真正的数组,然后利用数组的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就是一个只读的类数组对象

 

标签:arrayLike,将类,全选,every,数组,var
From: https://blog.51cto.com/u_15983333/6091798

相关文章

  • vue2 模拟响应式数组优化2
    上一篇主要是对数组类型进行响应式处理,这次主要对数组里面的属性值、嵌套数组、数组新增后的值进行响应式处理。如下文:执行下面方法,数组的依赖函数不会触发import{obs......
  • #yyds干货盘点# LeetCode面试题:搜索旋转排序数组
    1.简述:整数数组nums按升序排列,数组中的值互不相同。在传递给函数之前,nums在预先未知的某个下标k(0<=k<nums.length)上进行了旋转,使数组变为[nums[k],nums[k+1],......
  • #yyds干货盘点# LeetCode面试题:在排序数组中查找元素的第一个和最后一个位置
    1.简述:给你一个按照非递减顺序排列的整数数组nums,和一个目标值target。请你找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值target,返回 [-1,-1]......
  • 2357. 使数组中所有元素都等于零 (Easy)
    问题描述2357.使数组中所有元素都等于零(Easy)给你一个非负整数数组nums。在一步操作中,你必须:选出一个正整数x,x需要小于或等于nums中最小的非零元素。n......
  • 2341. 数组能形成多少数对 (Easy)
    问题描述2341.数组能形成多少数对(Easy)给你一个下标从0开始的整数数组nums。在一步操作中,你可以执行以下步骤:从nums选出两个相等的整数从nums中移除这......
  • JavaScript Array(数组) 对象
    JavaScript Array(数组) 对象数组对象的作用是:使用单独的变量名来存储一系列的值。在线实例创建数组,为其赋值:实例varmycars=newArray();mycars[0]="Saab......
  • Java数组
    Java数组什么是数组数组是相同类型数据的有序集合。数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成。其中,每一个数据成为一个数组元素,每个数组元素可......
  • 力扣---33. 搜索旋转排序数组
    整数数组nums按升序排列,数组中的值互不相同。在传递给函数之前,nums在预先未知的某个下标k(0<=k<nums.length)上进行了旋转,使数组变为[nums[k],nums[k+1],...,......
  • 数组
                         ......
  • 2023.02.28 - 数组扁平化处理||同结构嵌套数组对象中删除某个键值
    根据childrens字段递归扁平化数组(保留父元素)//方法一:根据childrens字段递归扁平化数组(保留父元素)functionflatten1(arr){"usestrict";if(!arr)return[]......