用jQuery与原生js实现全选、全不选、反选方法对比

提示:要看懂这两个方法需要一定的jQuery与js基础知识。下面直接放出本人的源码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<!-- 先引入jquery库 -->
<script src="js/3.2.1jquery.min.js"></script>
</head>

<body>
	<form action="">
		<div>
			<label><input class="duo" type="checkbox" name="">选择1</label>
		</div>
		<div>
			<label><input class="duo" type="checkbox" name="">选择2</label>
		</div>
		<div>
			<label><input class="duo" type="checkbox" name="">选择3</label>
		</div>
		<div>
			<label><input class="duo" type="checkbox" name="">选择4</label>
		</div>
		<div>
			<label><input class="dan" type="radio" name="danx">全选</label>
			<label><input class="dan" type="radio" name="danx">全不选</label>
			<label><input class="dan" type="radio" name="danx">反选</label>
		</div>
	</form>

	<script>
	/*jQuery方法(逻辑清晰,更加简洁)*/
		/*
		//全选
		$(":radio").eq(0).click(function(){
			$(":checkbox").prop({"checked":true});
		});
		
		//全不选
		$(":radio").eq(1).click(function(){
			$(":checkbox").prop({"checked":false});
		});
		
		//反选
		$(":radio").eq(2).click(function(){
			$(":checkbox").each(function(){
				this.checked=!this.checked;
			});
		});
		*/
/******************分割线*****************/
		
	/*原生js方法(相对繁琐)*/
		//获取checked多选框数组
		var duo=document.getElementsByClassName("duo");
		//获取 全选、全不选、反选 数组
		var dan=document.getElementsByClassName("dan");
		//全选
		dan[0].onclick=function(){
			for(var i=0;i<duo.length;i++){
				duo[i].checked=true;
			};
		};
		
		//全不选
		dan[1].onclick=function(){
			for(var i=0;i<duo.length;i++){
				duo[i].checked=false;
			};
		};
		
		//反选
		dan[2].onclick=function(){
			for(var i=0;i<duo.length;i++){
				duo[i].checked=!duo[i].checked;
			};
		};
	</script>
</body>
</html>

浏览器显示如下:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:, ,
顶部