题解 | #全选#

全选

https://www.nowcoder.com/practice/84b89f326e3c4e96bacb63296e84623a

思路:使用all获取全选按钮,使用options获取其他按钮,注意,此处获得的是伪数组,故需要使用Array.from转换为真正的数组才可以使用数组方法。当all改变时,使用forEach方法遍历options数组,并且将其每一个项的选中状态设置为all的选中状态,即x.checked = all.checked。当其它每一个改变时,使用forEach方法遍历options数组,并为每一个数组元素绑定onchange事件,并且将options使用every过滤器得到的结果赋值给all.checked。

<script>  
	var all = document.querySelector('#all')
	// 将类数组使用from转化为真正的数组才能使用every
	var options = Array.from(document.querySelectorAll('.item'))
	all.onchange = () => {
    	options.forEach(x => x.checked = all.checked)
	}
	options.forEach((item)=>{
    	item.onchange = function() {
        	all.checked = options.every(x => x.checked)
    	}
	})
</script>

总结:单选框或者多选框,使用元素.checked获取其是否被选中,其对应的是一个bool值。

#全选#
前端js面试 文章被收录于专栏

前端js面试,帮助你更好的理解js。

全部评论

相关推荐

不愿透露姓名的神秘牛友
07-09 13:05
TMD找工作本来就烦,这东西什么素质啊😡
Beeee0927:hr是超雄了,不过也是有道理的
点赞 评论 收藏
分享
06-26 22:20
门头沟学院 Java
码农索隆:让你把简历发给她,她说一些套话,然后让你加一个人,说这个人给你改简历,然后开始卖课
我的求职精神状态
点赞 评论 收藏
分享
每晚夜里独自颤抖:你cet6就cet6,cet4就cet4,你写个cet证书等是什么意思。专业技能快赶上项目行数,你做的这2个项目哪里能提现你有这么多技能呢
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务