js原生、jQuery实现复选框checkbox全选/全不选，反选

最新推荐文章于 2021-07-16 20:27:39 发布

风初

最新推荐文章于 2021-07-16 20:27:39 发布

阅读量255

点赞数

文章标签： javascript jquery html css

本文链接：https://blog.csdn.net/weixin_42370485/article/details/108793152

版权

js原生、jQuery实现复选框checkbox全选/全不选，反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<div>
		<b>原生js实现</b>
		<div>
			<input type="checkbox" name="check"/>啊
		</div>
		<div>
			<input type="checkbox" name="check"/>啊
		</div>
		<div>
			<input type="checkbox" name="check"/>啊
		</div>
		<div>
			<input type="checkbox" name="check"/>啊
		</div>
		<div>
			<input type="checkbox" id="check-all" onclick="checkAllOrNot()"/>全选
		</div>
		<div>
			<input type="button" id="upcheck" value="反选" onclick="upcheck()"/>
		</div>
	</div>
	<div>
		<b>jQuery实现</b>
		<div>
			<input type="checkbox" name="check2"/>啊
		</div>
		<div>
			<input type="checkbox" name="check2"/>啊
		</div>
		<div>
			<input type="checkbox" name="check2"/>啊
		</div>
		<div>
			<input type="checkbox" name="check2"/>啊
		</div>
		<div>
			<input type="checkbox" id="check-all2" />全选
		</div>
		<div>
			<input type="button" id="upcheck2" value="反选"/>
		</div>
	</div>
<script>
	//js原生代码实现
	//全选/全不选
    function checkAllOrNot(){
        var check=document.getElementsByName("check");
        for(var i=0;i<check.length;i++){
            check[i].checked=document.getElementById('check-all').checked;
        }
    }
	
	//反选
	function upcheck(){
		var check=document.getElementsByName("check");
		for(var i=0;i<check.length;i++){
			//好像直接取自身反值比判断来的更快
			check[i].checked=!check[i].checked;
			/*这个是加了判断的代码块
			 if(check[i].checked){
				check[i].checked=false;
			}
			else{
				check[i].checked=true;
			} */
		}
	}
</script>
<script src="lib/jquery-3.5.1.min.js"></script>
<script>
	//jq实现
	//全选/全不选
	$("#check-all2").click(function(){
		$("input[name='check2']:checkbox").prop("checked",this.checked);
	});
	//反选
	$("#upcheck2").click(function(){
		$("input[name='check2']:checkbox").each(function(){//不懂.each()方法自行百度，其实用for也行，但那算是原生js
			//这是用原生js实现代码,比较简洁
			this.checked=!this.checked;
			/* 这是用jq代码的实现
			$(this).prop("checked",!$(this).prop("checked")); */
			
			/* this和$(this)区别在于:
			首先this指向当前元素,
			而this仅能使用原生js属性例如上面的.checked属性,不能使用jq的属性.prop(),
			要使用jq属性就需要把this包装成jq元素即:$(this) */
			
		});
	});
</script>
</body>
</html>