快捷導(dǎo)航

購物車選中得到價格實(shí)現(xiàn)示例

更新時間：2014年01月26日 15:48:53 作者：

本文為大家介紹下購物車如何實(shí)現(xiàn)選中得到價格，下面有個不錯的示例，大家可以參考下

 
<!DOCTYPE html> 
<html> 
<head> 
<title>MyCart1.html</title> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<script language = "javascript" type = "text/javascript"> 

function jisuan(obj){ 

var total = 0; 
var fruits = document.getElementsByName("fruit"); 
for(var i=0;i<fruits.length;i++){ 
if(fruits[i].checked){ 
total += parseFloat(fruits[i].value); 
} 
} 
myspan.innerText = total + "元"; 
} 
</script> 
</head> 

<body> 
<input type = "checkbox" name = "fruit" value = "10" onclick = "jisuan(this)">蘋果 10元<br/> 
<input type = "checkbox" name = "fruit" value = "20" onclick = "jisuan(this)">香蕉 20元<br/> 
<input type = "checkbox" name = "fruit" value = "30" onclick = "jisuan(this)">西瓜 30元<br/> 
<input type = "checkbox" name = "fruit" value = "40" onclick = "jisuan(this)">栗子 40元<br/> 
<input type = "checkbox" name = "fruit" value = "50" onclick = "jisuan(this)">哈密瓜 50元<br/><br/> 
總價格是：<span id = "myspan">0元</span> 
</body> 
</html> 

購物車

相關(guān)文章

JavaScript設(shè)計(jì)模式發(fā)布訂閱模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式發(fā)布訂閱模式，發(fā)布訂閱設(shè)計(jì)模式是和觀察者設(shè)計(jì)模式基本上相同，但是他們兩個設(shè)計(jì)模式不同的是發(fā)布訂閱者擁有一個事件處理中心而觀察者并沒有
2022-06-06
JavaScript中利用for循環(huán)遍歷數(shù)組
這篇文章主要為大家詳細(xì)介紹了JavaScript中利用for循環(huán)遍歷數(shù)組，最好不要使用for in遍歷，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
JS與jQuery遍歷Table所有單元格內(nèi)容的方法
這篇文章主要介紹了JS與jQuery遍歷Table所有單元格內(nèi)容的方法,結(jié)合實(shí)例形式分別描述了JavaScript與jQuery實(shí)現(xiàn)遍歷table單元格的實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-12-12
延時重復(fù)執(zhí)行函數(shù) lLoopRun.js
延時重復(fù)執(zhí)行函數(shù) lLoopRun.js...
2007-05-05
echarts tooltip自適應(yīng)寬高讓提示框適應(yīng)不同屏幕尺寸demo
這篇文章主要為大家介紹了echarts tooltip自適應(yīng)寬高讓提示框適應(yīng)不同屏幕尺寸,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
Bootstrap學(xué)習(xí)筆記輪播（Carousel）插件
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記輪播（Carousel）插件,需要的朋友可以參考下
2017-03-03
javascript動態(tài)加載二
經(jīng)過一番思考，到底怎么解決導(dǎo)包而且是異步的方式，最后得出一個解決方案。先來看一下采用這個方案后的編程方式
2012-08-08
一次圍繞setTimeout的前端面試經(jīng)驗(yàn)分享
這篇文章主要跟大家分享了一次圍繞setTimeout展開的前端面試經(jīng)驗(yàn)，是一篇有意思的圍繞setTimeout展開的前端開發(fā)考題，考察了for循環(huán)、定時器setTimeout()、JavaScript閉包、匿名函數(shù)和Promise等，一不小心你可能就會做錯，快來看看你有沒有掌握了上面的知識。
2017-06-06
基于JavaScript實(shí)現(xiàn)圖片剪切效果
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)圖片剪切效果,本文給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
javascript 精粹筆記
javascript 精粹筆記，都是一些js下應(yīng)用技巧之類，學(xué)習(xí)js的朋友可以簡單的參考瀏覽下。
2010-05-05