使用HTML简单实现购物车

最新推荐文章于 2024-05-18 20:31:13 发布

宇宙最酷博主

最新推荐文章于 2024-05-18 20:31:13 发布

阅读量5.1k

点赞数 2

文章标签： HTML jq

本文链接：https://blog.csdn.net/weixin_45775120/article/details/103519437

版权

本文分享了如何利用HTML进行简单的购物车实现，通过实际操作验证了其有效性。

摘要由CSDN通过智能技术生成

<head>
	<meta charset="UTF-8">
	<title>我的购物车</title>
	<style type="text/css">
		tr {
			height: 50px;
		}
	</style>
	<!--第一步引入jq-->
	<script type="text/javascript" src="js/jquery-1.9.1.js" charset="UTF-8"></script>
	
	<script type="text/javascript">
		$(function() { /*页面加载完之后动态绑定事件*/
				$("tr:even").css("background", "#87CEFA  ");
				$("tr:odd").css("background", "#BBFF00");
			/*第二步实现全选*/
			//1.全选
			$("#chks").click(function() {
				//获取全选框的值
				var flag = $(this).prop("checked");
				//alert(flag);

				//根据全选框状态修改各个复选框的状态
				/*input[name=chk]-->得到所有的复选框*/
				$("input[name=chk]").prop("checked", flag);
			});

			//2.完善全选(有一项未选中，全选消除)，给每个图书的复选框绑定单击事件
			$("input[name=chk]").click(judgeAll);

			//3.反选
			$("#fx").click(function() {
				//获取所有图书的复选框
				var arr = $("input[name=chk]");
				//所有图书复选框的状态取反
				arr.each(function() {
					//先得到复选框之前的状态
					var flag = $(this).prop("checked");
					//在修改为相反的状态
					$(this).prop("checked", !flag);
				});
				//判断修改全选框的状态
				judgeAll();
			});
			
			/*第三步实现购物车新增、删除功能*/
			//4.新增一行
			 $("#addRow").click(function(){
			 	$("tr:odd").css("background", "#87CEFA  ");
				$("tr:even").css("background", "#BBFF00");
			 	//创建一个新行
			 	var newRow = $('<tr>'+
					'<td><input type="checkbox" name="chk" id="

最低0.47元/天解锁文章

宇宙最酷博主

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
使用HTML简单实现购物车

<head> <meta charset="UTF-8"> <title>我的购物车</title> <style type="text/css"> tr { height: 50px; } </style>  <script type="text/j...
复制链接

扫一扫