用jQuery实现购物车的全选和反选

最新推荐文章于 2022-05-26 14:30:45 发布

iuMeng

最新推荐文章于 2022-05-26 14:30:45 发布

阅读量784

点赞数 2

本文链接：https://blog.csdn.net/qq_44681288/article/details/89576910

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="box" data-id="111"></div>
		<input type="checkbox"  id="checkAll">全选
		<input type="checkbox"  id="checkOther">反选
		<ul>
			<li><input type="checkbox"></li>
			<li><input type="checkbox"></li>
			<li><input type="checkbox"></li>
			<li><input type="checkbox"></li>
		</ul>
		<script type="text/javascript">
			$(function(){
				/*console.log($("div").attr("id"),$("div").attr("data-id"));
				console.log($("div").prop("id"),$("div").prop("data-id"));
				$("div").attr("abc","aaa");
				$("div").removeAttr("abc");
				console.log($("input").attr("checked"),$("input").prop("checked"));*/
				
				$("#checkAll").click(function(){
					$("li input").prop("checked",$(this).prop("checked"));
				});
				
				$("li input").click(function(){
					if($("li input:checked").length == $("li input").length){
						$("#checkAll").prop("checked",true);
					}else{
						$("#checkAll").prop("checked",false);
					}
				})
				$("#checkOther").click(function(){
					$("li input").map(function(){
						$(this).prop("checked",!$(this).prop("checked"));
					})
				})
				
				$("div").addClass("test");
				$("div").css({"width":"100px","height":"100px","background":"Red"});
				$("div").css({"width":"200px"});
			})
		</script>
	</body>
</html>

iuMeng

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用jQuery实现购物车的全选和反选

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script&...
复制链接

扫一扫