关注前端 | 前端博客
当前位置: JavaScript > JS-全选/单选

JS-全选/单选

2018-07-29 分类:JavaScript 作者:管理员 阅读(37)

全选单选功能ES5实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
</head>
<body>
	<ul>
		<li>单选项<input type="checkbox" class="checkbox-item"></li>
		<li>单选项<input type="checkbox" class="checkbox-item"></li>
		<li>单选项<input type="checkbox" class="checkbox-item"></li>
		<li>单选项<input type="checkbox" class="checkbox-item"></li>
		<li>单选项<input type="checkbox" class="checkbox-item"></li>
		<li>单选项<input type="checkbox" class="checkbox-item"></li>
		<li>单选项<input type="checkbox" class="checkbox-item"></li>
		<li>单选项<input type="checkbox" class="checkbox-item"></li>
		<li>全选<input type="checkbox" class="checkbox-all"></li>
	</ul>
</body>
<script>
	//单选项
	let aCheckBox=document.querySelectorAll('.checkbox-item');
	//全选
	let checkAll=document.querySelector('.checkbox-all');

	//是否满足全选条件
	function isCheckAll(){
		let resArr=[];
		aCheckBox.forEach(function(item,index){
			if(!item.checked){
				resArr.push(false)
			}
		})
		return resArr.length===0
	}
	//单选项点击事件
	for(var i=0;i<aCheckBox.length;i++){
		aCheckBox[i].onclick=function(){
			if(isCheckAll()){
				checkAll.checked=true
			}else{
				checkAll.checked=false
			}
		}
	}
	//全选项点击事件
	checkAll.onclick=function(){
		if(this.checked){
			aCheckBox.forEach(function(item,index){
				item.checked=true
			})
		}else{
			aCheckBox.forEach(function(item,index){
				item.checked=false
			})
		}
	}
</script>
</html>

全选单选功能ES6实现

/*
更改其中的是否满足全选条件方法
*/

function isCheckAll(){
	return [...aCheckBox].every(item=>item.checked)
}

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 1 条评论 - JS-全选/单选

  1. 苏晨博客 Windows 7 Chrome 68.0.3440.84

    来访学习学习 🙂 🙂

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线