html 用js 多选计算？
请问如何用HTML+js实现多选的联动计算呢?<formaction=""method="get">您喜欢的水果？<br/><br/><label><inputname=...
请问如何用HTML+js实现多选的联动计算呢?
<form 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>
</form>
比如我勾选了苹果跟香蕉，就会显示出16元，自动计算了，或者添加个“显示价格”“按钮也行，我只想让用户，选择后显示出来价格就行，如何形式显示无所谓的，谢谢 展开
<form 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>
</form>
比如我勾选了苹果跟香蕉，就会显示出16元，自动计算了，或者添加个“显示价格”“按钮也行，我只想让用户，选择后显示出来价格就行，如何形式显示无所谓的，谢谢 展开
展开全部
<!DOCTYPE html>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
下面的代码就可以，测试通过：
<script language=javascript>
function show_amnt(){
var s=0,i;
for (i=0;i<form1.Fruit.length;i++)
if (form1.Fruit[i].checked) s+=parseInt(form1.Fruit[i].value);
form1.amnt.value=s;
}
</script>
<form action="" method="get" name="form1">
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value="10" onClick="show_amnt();" />苹果 10元</label>
<label><input name="Fruit" type="checkbox" value="5" onClick="show_amnt();" />桃子5元 </label>
<label><input name="Fruit" type="checkbox" value="6" onClick="show_amnt();" />香蕉6元 </label>
<label><input name="Fruit" type="checkbox" value="3" onClick="show_amnt();" />梨 3元</label>
合计金额：<input type=text name="amnt" value="0" readonly>
</form>
追问
谢谢你
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<form action="" method="get">
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value=10 />苹果 10元</label>
<label><input name="Fruit" type="checkbox" value=5 />桃子5元 </label>
<label><input name="Fruit" type="checkbox" value=6 />香蕉6元 </label>
<label><input name="Fruit" type="checkbox" value=3 />梨 3元</label>
<div id="show"></div>
</form>
<button id="s">显示价格</button>
<script>
document.getElementById('s').onclick = function () {
var f = document.getElementsByName('Fruit');
var show = document.getElementById('show');
var r = 0;
for (var i = 0; i < f.length; i++) {
if (f[i].checked) {
r += parseInt(f[i].value);
}
}
show.innerText = r;
}
</script>
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value=10 />苹果 10元</label>
<label><input name="Fruit" type="checkbox" value=5 />桃子5元 </label>
<label><input name="Fruit" type="checkbox" value=6 />香蕉6元 </label>
<label><input name="Fruit" type="checkbox" value=3 />梨 3元</label>
<div id="show"></div>
</form>
<button id="s">显示价格</button>
<script>
document.getElementById('s').onclick = function () {
var f = document.getElementsByName('Fruit');
var show = document.getElementById('show');
var r = 0;
for (var i = 0; i < f.length; i++) {
if (f[i].checked) {
r += parseInt(f[i].value);
}
}
show.innerText = r;
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
学校的作业吗？你看这个够简单吗？
<html>
<script>
function showSum(){
var sum = 0;
if(document.getElementById("Fruit1").checked){
sum += 10;
}
if(document.getElementById("Fruit2").checked){
sum += 5;
}
if(document.getElementById("Fruit3").checked){
sum += 6;
}
if(document.getElementById("Fruit4").checked){
sum += 3;
}
document.getElementById("txtSum").innerText = "总价：" + sum + "元";
}
</script>
<form action="" method="get">
您喜欢的水果？<br /><br />
<label><input id="Fruit1" onclick="showSum()" type="checkbox" value="" />苹果 10元</label>
<label><input id="Fruit2" onclick="showSum()" type="checkbox" value="" />桃子5元 </label>
<label><input id="Fruit3" onclick="showSum()" type="checkbox" value="" />香蕉6元 </label>
<label><input id="Fruit4" onclick="showSum()" type="checkbox" value="" />梨 3元</label>
</form>
<hr>
<font id="txtSum">总价：</font>
</html>
<html>
<script>
function showSum(){
var sum = 0;
if(document.getElementById("Fruit1").checked){
sum += 10;
}
if(document.getElementById("Fruit2").checked){
sum += 5;
}
if(document.getElementById("Fruit3").checked){
sum += 6;
}
if(document.getElementById("Fruit4").checked){
sum += 3;
}
document.getElementById("txtSum").innerText = "总价：" + sum + "元";
}
</script>
<form action="" method="get">
您喜欢的水果？<br /><br />
<label><input id="Fruit1" onclick="showSum()" type="checkbox" value="" />苹果 10元</label>
<label><input id="Fruit2" onclick="showSum()" type="checkbox" value="" />桃子5元 </label>
<label><input id="Fruit3" onclick="showSum()" type="checkbox" value="" />香蕉6元 </label>
<label><input id="Fruit4" onclick="showSum()" type="checkbox" value="" />梨 3元</label>
</form>
<hr>
<font id="txtSum">总价：</font>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
