购物车实现选中商品算出总价（js）

最新推荐文章于 2024-06-28 11:52:57 发布
最新推荐文章于 2024-06-28 11:52:57 发布
阅读量6.6k 收藏 24
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44423938/article/details/105119420
版权

思想：a:首先可以通过数据库，当你点击一次选择时，对复选框进行扫描，查出所有已经被选中的复选框，这个复选框需要加一个自定义属性，这个属性就是这个商品的id号，通过id号在数据库查询相应的价格进行累加。b:我这里没有用数据库，因为我的上一个需求已经把价格从数据库拿出来了，所以我直接在复选框上加了一个商品价格的自定义属性，当每次点击复选框时对复选框进行扫描，查出所有已经被选中的复选框，然后获取到价格进行累加

效果
1.首先没点击时时0元
在这里插入图片描述
2.当点击一个复选框
在这里插入图片描述
3.当点击两个复选框
在这里插入图片描述
4.当点击全选复选框时
在这里插入图片描述
5.点击全不选
在这里插入图片描述

代码

html


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  weixin_44423938
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    24
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
HTML 购物车计算总价+添加或者减少商品数量

				
			

			

				

					遗声落西秦
				

				

					12-12
					
					1万+
					
				

			

		

		

			
				
var app=angular.module("myapp",[]);
			app.controller("demoC",["$scope",function($scope)
			{
				$scope.ShoppingCar=[{Title:"红苹果",Count:1,UnitPrice:2.5},{Title:"绿苹果",Count:1,UnitPrice:2}];
				//定义函数

			
		

	



                

              
                



	

		

			

				
					
实现网页购物车功能，完成基本的商品价格计算等功能

				
			

			

				

					qq_38902844的博客
				

				

					05-20
					
					7587
					
				

			

		

		

			
				
效果图

说明

html, css, js 代码分别保存 index.html , main.css, main.js 文件中，而main.css 和 main.js 文件又分别保存在 css 和 js 文件夹下。3张素材图片保存在 images 目录下，具体情况见下图：


素材图片

pic01.jpg

pic02.jpg

pic03.jpg


源代码
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
    &lt

			
		

	



                


  
              

                


	

		

			

				
					
使用Vue.js实现简单购物车、实现删除商品，添加数据改变结算价格HTML+CSS+JS

				
			

			

				

					dycoolya的博客
				

				

					12-21
					
					1423
					
				

			

		

		

			
				
【代码】使用Vue.js实现简单购物车、实现删除商品，添加数据改变结算价格HTML+CSS+JS。

			
		

	





	

		

			

				
					
Vue购物车功能计算总价/全选/删除

				
			

			

				

					xuexiaiwo11的博客
				

				

					06-10
					
					4129
					
				

			

		

		

			
				
设置4行数据显示在页面上	点击删除可以删除当前行	点击全选可以全选（不用和删除其他功能有关系），输入购买数量，总金额会改变


			
		

	



		

			
		



	

		

			

				
					
uniapp购物车基本功能——总价计算（商城项目）

					
最新发布

				
			

			

				

					weixin_54586989的博客
				

				

					06-28
					
					331
					
				

			

		

		

			
				
合计价格: {{ totalPrice }} 元

			
		

	





	

		

			

				
					
小程序购物车实现

				
			

			

				

					liangtaox8的博客
				

				

					09-11
					
					1万+
					
				

			

		

		

			
				
前言
以往的购物车，基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。
需求

先来弄清楚购物车的需求。

单选、全选和取消，而且会随着选中的商品计算出总价
单个商品购买数量的增加和减少
删除商品。当购物车为空时，页面会变为空购物车的布局

原文作者：林鑫，作者博客：https://github.com/lin...

			
		

	





	

		

			

				
					
thinkphp6 购物车数量加减价格变化

				
			

			

				

					code_nutter的博客
				

				

					03-15
					
					1478
					
				

			

		

		

			
				
商城购物车


//加
$('.plus').click(function () {
   var current_number = $(this).prev().val();
   if (current_number == 10){
      return false;
   }else{
      var current_number = parseInt(current_number)+1;
      $(this).prev().val(current_number);
   }
   /.

			
		

	





	

		

			

				
					
vue 实现购物车总价计算

				
			

			

				

					10-16
				

			

		

		

			
				
今天小编就为大家分享一篇vue 实现购物车总价计算，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
帝国CMS调用购物车商品数量和总价的方法

				
			

			

				

					09-29
				

			

		

		

			
				
主要为大家介绍了帝国CMS调用购物车商品数量和总价的方法,在采用帝国CMS进行商城系统开发中非常具有实用价值,需要的朋友可以参考下

			
		

	





	

		

			

				
					
javascript实现商品购物车功能

				
			

			

				

					09-27
				

			

		

		

			
				
纯javascript实现购物车，完成从商品页向购物车中添加商品，购物车中删除商品，更改商品数量，删除商品，全选单选等购物车操作，涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作，综合性较强，对于...

			
		

	





	

		

			

				
					
js实现购物车商品数量加减

				
			

			

				

					10-14
				

			

		

		

			
				
在JavaScript实现购物车商品数量加减的过程中，主要涉及到前端交互逻辑和用户界面更新。下面将详细解释这个功能的实现步骤和关键代码。  首先，HTML部分是构建用户界面的基础。在这个例子中，我们有一个简单的表单，...

			
		

	





	

		

			

				
					
js实现商品抛物线加入购物车特效

				
			

			

				

					10-22
				

			

		

		

			
				
主要为大家详细介绍了js实现商品抛物线加入购物车特效的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少

				
			

			

				

					m0_70932336的博客
				

				

					04-03
					
					4070
					
				

			

		

		

			
				
【代码】html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少。

			
		

	





	

		

			

				
					
JS计算购物车中商品总价

				
			

			

				

					weixin_62980497的博客
				

				

					10-24
					
					1092
					
				

			

		

		

			
				
3.页面初始化的时候,单价有初始值,自动计算出商品的总金额,同时计算出所有商品的总金额;商品信息通过创建商品对象来实现，商品的加和通过创建数组，再通过遍历数组读取指定属性对价格进行计算。单价,总金额:input输入框输入的是只能是非负的浮点数或者整数切只能保留两位小数点。1. 当单价改变的时候,计算出这件商品的总金额,同时计算出所有商品的总金额;2.当单件商品的总金额改变时,计算出所有商品的总金额。

			
		

	





	

		

			

				
					
购物车 如何实现数量增加，小计，合计，总数JSP中页面的变化

					
热门推荐

				
			

			

				

					张不帅
				

				

					09-17
					
					1万+
					
				

			

		

		

			
				
样式的调节：


&lt;style&gt;
div.cartDiv {
	max-width: 1013px;
	margin: 10px auto;
	color: black;
}

table.cartProductTable {
	width: 100%;
	font-size: 12px;
}

tr.cartProductItemTR {
	border: 1px solid #CC...

			
		

	





	

		

			

				
					
JavaScript购物车的实现

				
			

			

				

					qq_44061998的博客
				

				

					04-03
					
					981
					
				

			

		

		

			
				
购物车实现

			
		

	





	

		

			

				
					
javascript 实现购物车多项物品累计求总价案例 ,价格保留两位小数

				
			

			

				

					Z1014h的博客
				

				

					09-15
					
					1336
					
				

			

		

		

			
				
本案例运用了map遍历数组,join拼接字符串,spilt分割字符串,toFixed保留小数位数

			
		

	





	

		

			

				
					
编写程序实现购物车商品自定义单价，并计算总价。

				
			

			

				

					06-03
				

			

		

		

			
				
以下是一个简单的示例代码，可以让用户自定义商品的单价并计算购物车的总价。代码使用了HTML、CSS和JavaScript，使用了表单元素和事件处理等基础知识。

```html
<!DOCTYPE html>
<html>
<head>
	<title>购物车示例</title>
	<style>
		table {
			border-collapse: collapse;
			width: 100%;
		}

		th, td {
			border: 1px solid black;
			padding: 8px;
			text-align: center;
		}

		th {
			background-color: #ddd;
			font-weight: bold;
		}

		.totalPrice {
			font-weight: bold;
			margin-top: 10px;
		}
	</style>
	<script>
		function calculateTotal() {
			// 获取表格中所有单价输入框和数量输入框
			var priceInputs = document.querySelectorAll(".priceInput");
			var quantityInputs = document.querySelectorAll(".quantityInput");

			var total = 0;
			for (var i = 0; i < priceInputs.length; i++) {
				var price = parseFloat(priceInputs[i].value);
				var quantity = parseInt(quantityInputs[i].value);
				if (!isNaN(price) && !isNaN(quantity)) {
					total += price * quantity;
				}
			}

			// 将总价显示在页面上
			document.getElementById("totalPrice").innerHTML = "总价：" + total.toFixed(2);
		}
	</script>
</head>
<body>
	<h1>购物车</h1>
	<table>
		<thead>
			<tr>
				<th>商品名称</th>
				<th>单价</th>
				<th>数量</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>商品1</td>
				<td><input type="number" class="priceInput" value="10"></td>
				<td><input type="number" class="quantityInput" value="1"></td>
			</tr>
			<tr>
				<td>商品2</td>
				<td><input type="number" class="priceInput" value="15"></td>
				<td><input type="number" class="quantityInput" value="1"></td>
			</tr>
			<tr>
				<td>商品3</td>
				<td><input type="number" class="priceInput" value="20"></td>
				<td><input type="number" class="quantityInput" value="1"></td>
			</tr>
		</tbody>
	</table>

	<button onclick="calculateTotal()">计算总价</button>
	<p id="totalPrice" class="totalPrice"></p>
</body>
</html>
```

在代码中，我们先定义了一个表格，其中每个商品的单价和数量都是通过输入框进行输入的。我们给单价输入框和数量输入框都加上了相应的类名，以便在JavaScript代码中获取它们的值。

在JavaScript代码中，我们定义了一个calculateTotal函数，用于计算购物车的总价。函数首先获取表格中所有单价输入框和数量输入框，然后遍历它们计算出总价，并将总价显示在页面上。

在HTML代码中，我们添加了一个计算总价的按钮和一个用于显示总价的p元素。点击按钮时会调用calculateTotal函数计算总价，并将总价显示在页面上。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值