jQuery购物车案例

最新推荐文章于 2024-04-19 10:15:13 发布

前端鲨鱼

最新推荐文章于 2024-04-19 10:15:13 发布

阅读量682

点赞数

分类专栏： jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_50839755/article/details/123870708

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

整体代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 100px;
				height: 50px;
				border: 1px solid silver;
			}
		</style>
	</head>
	<body>
		<div class="car-head">
			sellectall<input type="checkbox"  class="sellectall"/>
		</div>
		<div class="car-body">
			<div class="box">
				<input type="checkbox" class="s-check"/>
			</div>
			<div class="box">
				<input type="checkbox" class="s-check"/>
			</div>
			<div class="box">
				<input type="checkbox" class="s-check"/>
			</div>
		</div>
		<div class="car-bottom">
			sellectall<input type="checkbox" class="sellectall" />
		</div>
		<script src="../jQuery-code/jQuery.js"></script>
		<script>
			// 全选和全不选模块
			// 1.设置全选框改变状态 .change() 
			// 2.获取全选框 是否选中 把值赋给小的单选框
			// 所有小单选框选中 全选框选中
			// 1.判断所有小单选框选中的个数 element:checked
			// 2.选中个数等于 单选框个数 全选框选中 checked属性变为true
			$(function(){
				$(".sellectall").change(function(){
					var value = $(this).prop("checked");
					console.log(value);
					$(".s-check").prop("checked",$(this).prop("checked"));
					// $(".s-check").prop("checked","value");不知道为什么不能用value
					$(".sellectall").prop("checked",$(this).prop("checked"));
				})
				$(".s-check").change(function(){
					if($(".s-check:checked").length == $(".s-check").length){
						$(".sellectall").prop("checked",true)
					}else{
						$(".sellectall").prop("checked",false)
					}
				})
			})
		</script>
	</body>
</html>

思路：

1.当全选按钮选中时其他按钮也会被选中

2.全选按钮被取消时其他按钮也被取消

3.所有的按钮都选中时全选按钮也被选中

具体解决：

1.选择全选按钮赋予事件 .change 每当按钮状态改变时触发函数

把全选按钮的 checke属性值赋给每个按钮即可用 .prop("属性名","属性值")

2.判断所有被选中的按钮的个数是否等于总按钮数

如果相等全选按钮的 checked 属性赋值 true / 反之赋值 false

采用 element.checked 会返回伪数组加上 .length 即可获得长度