jQuery html css实现购物车案例

最新推荐文章于 2024-08-09 18:43:30 发布

英俊男孩

最新推荐文章于 2024-08-09 18:43:30 发布

阅读量1.1k

点赞数

文章标签： js jquery css3 html

本文链接：https://blog.csdn.net/qq_44829011/article/details/106325315

版权

本文展示了如何结合jQuery、CSS3和HTML技术实现一个购物车的全选功能模块。通过代码示例，详细解释了各个部分的实现逻辑和效果。

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

效果如下图所示
在这里插入图片描述全选功能模块链接
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="Jq.js"></script>
	<script type="text/javascript">
	$(function(){
   
		$('#id_1 ul :first-child').siblings('li').hide();
		$('#id_1 ul :first-child').siblings('li').css('border-bottom','1px solid black');
		$('#id_1 ul').mousedown(function(){
   
			$(this).children('li').show();
		});
		$('#id_1 ul').mouseleave(function(){
   
			$(this).children('li').eq(0).siblings('li').hide();
		});
		$('#checkall').change(function(){
   
			/*全选按钮控制下面的按钮*/
			$('.cargo').find('input').prop('checked',$(this).prop('checked'));
		})
		$('.cargo').find('input').change(function(){
   
			/*下面的按钮控制全选按钮*/
			//console.log($('.cargo input:checked').length);
			/*先刷新一下 总计*/
			if($('.cargo input:checked').length==3){
   
				$('#checkall').prop('checked',true);
			}else{
   
				$('#checkall').prop('checked',false);
			}
		})
		$('.delete').click(function(){
   
			/*删除键  */
			$(this).parent().parent().find('input').prop('value',0);
			$(this).parent().parent().hide();
		
			var money=parseFloat($(this).parent().parent().find('.univalence').html());
			var num=parseInt($(this).parent().parent().find('input'