js购物车选中商品实现计算商品总价格

为了在激烈的互联网竞争中获得一席之地，都努力使自己的网站更为人性化。比如在购物网站一般都有这样的功能，那就是在结算商品的时候，网站可以自动计算要购买商品所需要花费的金钱数量。

代码实例如下:

<!DOCTYPE html>

< html >

< head >

< meta charset = " utf-8" >

< title >购物车选中商品实现计算商品总价格</ title >

< script type = "text/javascript" >

function jisuan(obj){

var total=0;

var fruits=document.getElementsByName("fruit");

for (var index = 0; index < fruits.length; index++) {

if (fruits[index].checked) {

total += parseFloat(fruits[index].value);

}

myspan.innerHTML=total+"元";

}

window.onload=function(){

var obox=document.getElementById("box");

var inputs=obox.getElementsByTagName("input");

for (var index = 0; index < inputs.length; index++) {

inputs[index].onclick = function () {

jisuan(this)

}

</ script >

</ head >

< body >

< ul id = "box" >

< li >< input type = "checkbox" name = "fruit" value = "10" />商品一 10元</ li >

< li >< input type = "checkbox" name = "fruit" value = "20" />商品二 20元</ li >

< li >< input type = "checkbox" name = "fruit" value = "30" />商品三 30元</ li >

< li >< input type = "checkbox" name = "fruit" value = "40" />商品四 40元</ li >

< li >< input type = "checkbox" name = "fruit" value = "50" />商品五 50元</ li >

</ ul >

总价格是：< span id = "myspan" >0元</ span >

</ body >

</ html >

选中商品可以实现自动计算价格总额的功能，下面简单介绍一下它的实现过程。

一.实现原理:

获取ul元素下所有的input元素，然后通过for循环批量为它们注册onclick事件处理函数，此事件处理函数能够遍历所有的复选框，然后对选中的复选框的value属性值进行相加操作。

js购物车选中商品实现计算商品总价格相关推荐

购物车（七）-计算商品总价——计算总价-计算属性数据缓存api-wx.setStorageSync()方法
计算商品总价--计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法通过计算属性计算商品总价 allPrice() {// 计算购物车所有商品的总价格// 单价 ...
android购物车简单实现全选+加减器+总价格
//Activity主頁面佈局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
微信小程序功能：全选和反选--修改商品数量、删除商品--计算总价格和总数量--收货地址
微信小程序–购物车页面(核心) 包含功能点: 全选和反选计算:总价格和总数量修改商品数量.删除商品收货地址结构:cart.wxml  <view c ...
vue.js 实现全选，单选，计算商品总价格，商品件数
vue.js 实现全选,单选,计算商品总价格,商品件数 1.标签 <div id="main-body" class="box"> <div ...
Vue2.0开发之——购物车案例-Footer组件封装-计算商品的总价格(51)
一概述 App.vue中计算勾选商品的总价格定义子组件Footer中的商品总价格将App.vue中商品的总价格传递给Footer显示二 App.vue中计算勾选商品的总价格 2.1 商品总价格 ...
京东实现自动账号密码登录；自动将购物车选中商品下单购买。京东在线抢购
=京东实现自动账号密码登录:自动将购物车选中商品下单购买.京东在线抢购 #!/usr/bin/env python # -*- coding:utf-8 -*-from selenium import ...
【C++之静态数据成员和静态成员函数】计算商品总销售款和平均售价
题目要求商店销售某一商品,商店每天公布统一的折扣(discount).同时允许销售人员在销售时灵活掌握售价(price),在此基础上,对一次购 10 件以上者,还可以享受 9.8 折优惠.现已知当天 ...
python商品总价_【Python基础 | 列表】小实验：实现显示商品，选择商品，将商品加入购物车，得到总价格...
B站学习<Python爬虫技术5天速成>时遇到的小作业,原视频点我题目如下: 代码如下: products = [["iPhone", 6888], ["M ...
【Python基础 | 列表】小实验：实现显示商品，选择商品，将商品加入购物车，得到总价格
B站学习<Python爬虫技术5天速成>时遇到的小作业,原视频点我题目如下: 代码如下: products = [["iPhone", 6888], ["M ...

js购物车选中商品实现计算商品总价格

js购物车选中商品实现计算商品总价格相关推荐

最新文章

热门文章