<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="fruits" action="" method="get">
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value="" />苹果 10元</label>
<label><input name="Fruit" type="checkbox" value="" />桃子5元 </label>
<label><input name="Fruit" type="checkbox" value="" />香蕉6元 </label>
<label><input name="Fruit" type="checkbox" value="" />梨 3元</label>
<br /><br />
当前价格: <span id="total">0</span>元
</form>
</body>
</html> <script>
var fruits = document.getElementById('fruits')
var labels = fruits.getElementsByTagName('label')
var total = document.getElementById('total')
total.price = 0
// 循环给每个label标签添加price属性存标签内水果的价格
for (var i = 0, len = labels.length i < len i++){
var str = labels[i].innerText
var price = str.replace(/[^0-9]/ig,"")
labels[i].price = Number(price)
}
// 循环给每个label标签注册点击事件
for (var i = 0, len = labels.length i < len i++){
labels[i].onclick = function (e) {
var e = e || window.event
var elm = e.target || e.srcElement
//label点击拦截,只获取input的click
if (elm.tagName !== 'INPUT'){
return
}
var flag = this.firstChild.checked
if (flag){
total.price += this.price
total.innerText = total.price
}
else {
if (total.price){
total.price -= this.price
total.innerText = total.price
}
}
}
}
</script>
你看看<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
*{
margin: 0
padding: 0
}
input[type="button"]{
width: 50px
height: 30px
background: #D9D7D7
font-size: 14px
}
#input_last{
width: 100px
height: 30px
background: #D9D7D7
font-size: 14px
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="600px" height="400px" align="center">
<tr bgcolor="gray">
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th> *** 作</th>
</tr>
<tr align="center">
<td>防滑真皮休闲鞋</td>
<td>12</td>
<td>￥568.50</td>
<td>
<input type="button" value="删除"/>
<input type="button" value="修改"/>
</td>
</tr>
<tr align="center">
<td>2</td>
<td>￥49.00</td>
<td>
<input type="button" value="删除"/>
<input type="button" value="修改"/>
</td>
</tr>
<tr align="center">
<td>抗疲劳神奇钛项圈</td>
<td>
<input type="text" value="15" size="8" />
</td>
<td>￥49.00</td>
<td>
<input type="button" value="删除"/>
<input type="button" value="修改"/>
</td>
</tr>
<tr align="center">
<td>抗疲劳神奇钛项圈</td>
<td>4</td>
<td>￥49.00</td>
<td>
<input type="button" value="删除"/>
<input type="button" value="修改"/>
</td>
</tr>
<tr align="center">
<td colspan="4">
<input id="input_last" type="button" value="增加订单"/>
</td>
</tr>
</table>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）