如何写js, 让html选中复选框, 价格自动加上去
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何写js, 让html选中复选框, 价格自动加上去相关的知识，希望对你有一定的参考价值。
代码如下, 选择 增加10元, <div id="price">的价格显示成58元, 选择20元,就变成68元, 选择20元,30元两个,就变成98元
<div id="box">
<label><input type="checkbox" value="10" />增加10元</label>
<label><input type="checkbox" value="20" />增加20元</label>
<label><input type="checkbox" value="30" />增加30元</label>
</div>
<div id="price">价格48元</div>
<head>
<title>test</title>
<script type="text/javascript">
var priceSum;
window.onload = function ()
priceSum = 0;
Init();
function Init()
//box 下所有的 input 标签元素
var checks = document.getElementById("box").getElementsByTagName("input");
priceSum = 0;//初始化价格
for (var i = 0; i < checks.length; i++) //遍历标签
//如果是复选框并且为选中状态
if (checks[i].type == "checkbox" && checks[i].checked)
priceSum += parseFloat(checks[i].value);//累加价格，parseFloat 转换为浮点型数值
document.getElementById("price").innerHTML = "价格 " + priceSum + "元";
//复选框的 onclick 事件也可以直接绑定为 Init()，就是耗效率
function updateSum(chk)
if (chk.checked) //为选中状态，当前总价加上该复选框的值
priceSum += parseFloat(chk.value);
else //否则减少该值
priceSum -= parseFloat(chk.value);
document.getElementById("price").innerHTML = "价格 " + priceSum + "元";
</script>
</head>
<body>
<div id="box">
<label><input type="checkbox" value="10" onclick="updateSum(this)" />增加10元</label>
<label><input type="checkbox" value="20" onclick="updateSum(this)" />增加20元</label>
<label><input type="checkbox" value="30" onclick="updateSum(this)" />增加30元</label>
</div>
<div id="price">价格48元</div>
</body>
</html> 参考技术B <script>
var price = 48;
function add(num)
price+=num;
document.getElementById("price").innerHTML = "价格"+price+"元";
</script>
<div id="box">
<label><input type="checkbox" value="10" onclick="add(10)"/>增加10元</label>
<label><input type="checkbox" value="20" onclick="add(20)"//>增加20元</label>
<label><input type="checkbox" value="30" onclick="add(30)"//>增加30元</label>
</div>
<div id="price">价格48元</div>追问
这个价格是不固定的. 48元只是举例
还有, 取消复选框打钩, 价格并没降下来, 只会一直增加.
var price = 48;
function add(obj)
var val = parseFloat(obj.value);
if (obj.checked)
price+=val;
else
price-=val;
show();
function setbase(obj)
var num = parseFloat(obj.value);
if(price!=num)
var chks = document.getElementById("box").getElementsByTagName("INPUT");
price = num;
for (var i = 0; i
动态基础值：
增加10元
增加20元
增加30元
价格48元
function add()
var price = Number(document.getElementById("price").value);
var boxes = document.getElementsByName("addPrice");
var num = boxes.length;
for(i=0;i<num;i++)
if(boxes[i].checked)
price += Number(boxes[i].value);
document.getElementById("price").innerHTML = "价格"+price+"元";
</script>
<div id="box">
<label><input type="checkbox" value="10" name="addPrice"
onclick="add()"/>增加10元</label>
<label><input type="checkbox" value="20" name="addPrice"
onclick="add()"/>增加20元</label>
<label><input type="checkbox" value="30" name="addPrice"
onclick="add()"/>增加30元</label>
</div>
<div id="price">价格48元</div>
<input type="hidden" id="price" value="48" />追问
选中复选框后, 价格变成NaN元 代码应该有问题
追答手工代码,难免有错~经测试~我定义的hidden和你原本的div冲突了..你改一下hidden的id,然后改一下var price = Number(document.getElementById("price").value);这里就行了..
本回答被提问者采纳HTML ionic 中 checkbox 的复选框 用css 如何改变外框的颜色
HTML ionic 中 checkbox 的复选框 用css 如何改变外框的颜色，在这里等请教高人指点！
改成这样
这个其实是js插件模拟的，大致思路是这样子的
先将checkbox隐藏
模拟一个checkbox,其实是div之类的元素，加上背景图片，在将执行选中事件时，就将这个模拟的checkbox添加或移除对应的CSS样式就可以，然后根据选择事件去操作原本隐藏的checkbox
这类的jq插件比较多！给你参考：http://www.oschina.net/news/18435/jquery-plugins-for-styling-checkbox-radio-buttons/
参考技术A 用背景图片代替吧，真正的checkbox隐藏， 状态通过js控制。 参考技术B 这个CheckBox使用了下面这个class.checkbox-wp .checkbox-checked
border-color: #387ef5;
background-color: #387ef5;
修改这个border-color就可以实现了，你也可以写一个class 覆盖他 参考技术C 改不了，，，你把这个框影藏掉，然后自己写一个框来定义样式，，，百度教程很多
以上是关于如何写js, 让html选中复选框, 价格自动加上去的主要内容，如果未能解决你的问题，请参考以下文章
大家好跪求，用安卓实现一个复选框选中另一个复选框默认选中，代码怎么写呢