题解 | #全选#

全选

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。

全部评论

相关推荐

建信金科 软件开发岗 16k 双非硕
点赞 评论 收藏
分享
评论
1
收藏
分享
牛客网
牛客企业服务