JavaScript购物车全选

最新推荐文章于 2022-08-03 16:35:07 发布

白就完了

最新推荐文章于 2022-08-03 16:35:07 发布

阅读量1.0k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43493397/article/details/119783985

版权

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/jquery-1.7.1.min.js"></script>
	
	<body>
		<table>
			<tr>
				<td>
					<input type="checkbox" name="single" onclick="test()" class="check"/>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="single" onclick="test()" class="check"/>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="single" onclick="test()" class="check"/>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="all" id="checkAll"/>全选
				</td>
			</tr>
		</table>
	</body>
	<script>
		//给全选框绑定事件
		$("#checkAll").click(function(){
			var f= $(this).prop("checked")
			$(".check").prop("checked",f)
		})
		function test() {
			var names = document.getElementsByName("single");   
			var all = document.getElementById("checkAll");
			var index = 0;
			//判断如果其中有一个没被选中，全选框自动取消选中
            for(var i=0;i<names.length;i++){
            	if(names[i].checked==false){
            		all.checked = false;
            		break;
            	}
            	index++;
            }
            //判断如果全部选中，全选框自动选中
            //因为一共有三个单选按钮，所以判断条件为index=3
            if(index==3){
            	all.checked = true;
            }
		}
	</script>
</html>

白就完了

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript购物车全选

<html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.7.1.min.js"></script> <body> <table> <tr> <td> <input type="checkbox" .
复制链接

扫一扫