复选框的全选反选实现（即购物车的复选框实现）

最新推荐文章于 2024-05-01 02:23:23 发布

Dapao胡

最新推荐文章于 2024-05-01 02:23:23 发布

阅读量9.5k

点赞数 13

文章标签：复选框全选与反选购物车复选框实现原生js全选与反选 jQuery全选与反选

本文链接：https://blog.csdn.net/hushuanghui123/article/details/61641186

版权

这周工作时在做全选时遇到卡壳，趁着闲暇时间整理一下全选的的几种实现方式。
html页面

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>测试页面</title>
		<script src = "jquery.js"></script>
		<script src = "test.js"></script>
	</head>
	<body>
		<input type = "checkbox" id = "allCheck"/>全选</th><br/>
		<input type = "checkbox" name = "check"/></th>
		<input type = "checkbox" name = "check"/></th>
		<input type = "checkbox" name = "check"/></th>
		<input type = "checkbox" name = "check"/></th>
 	</body>
</html>

js代码

第一种方式

	//全选框
	$("#allCheck").click(function(){
		if($(this).attr("checked")){
			$("input[name='check']").attr("checked",true);
		}else{
			$("input[name='check']").attr("checked",false);
		}
	})
	//单选框
	$("input[name='check']").change(function(){
		if($("input[name='check']").not("input:checked").size() <= 0){
			$("#allCheck").attr("checked",true);
		}else{
			$("#allCheck").attr("checked",false);
		}
	})

第二种方式

	//全选框
	$("#allCheck").click(function(){
		$("input[name='check']").prop("checked",this.checked);
	})
	//单选框
	$("input[name='check']").change(function(){
		if($("input[name='check']").not("input:checked").size() <= 0){
			$("#allCheck").prop("checked",true);
		}else{
			$("#allCheck").prop("checked",false);
		}
	})

第三种方式（原生js）

	//全选框
	$("#allCheck").click(function(){
		var a = document.getElementById("allCheck");
		var b = document.getElementsByName("check");
		if(a.checked){
			for(var i = 0; i < b.length; i++){
				b[i].checked = true;
			}
		}else{
			for(var i = 0; i < b.length; i++){
				b[i].checked = false;
			}
		}
	})
	//单选框
	$("input[name='check']").click(function(){
		var flag = true;
		var a = document.getElementById("allCheck");
		var b = document.getElementsByName("check");
		for(var i = 0; i < b.length; i++){
			if(!b[i].checked){
				flag = false;
				break;
			}
		}
		a.checked = flag;
	});

Dapao胡

关注

13
点赞
踩
18

收藏

觉得还不错? 一键收藏
6
评论
复选框的全选反选实现（即购物车的复选框实现）

这周工作时在做全选时遇到卡壳，趁着闲暇时间整理一下全选的的几种实现方式。html页面测试页面全选 js代码第一种方式 $("#allCheck").click(function(){ if($(this).attr("checked")){ $("input[name='check']").at
复制链接

扫一扫