在JS中单击复选框时显示总价
Display total price when checkbox clicked in JS
我正在处理一个检查表单分配。所以,我有3个产品的价格和类型是复选框。合计字段将仅显示选中产品的总成本。但是,当我单击复选框时,合计字段将不显示任何内容。我是不是错过了什么?知道吗?非常感谢。我的HTML和JS:
<form action="" id="theForm">
<fieldset>
<legend>
Products
</legend>
<label>
<input name="product" value="12.95" type="checkbox" id="p1" onclick="total()"/>
Candy $12.95
</label>
<label>
<input name="product" value="5.99" type="checkbox" id="p2" onclick="total()"/>
Burger $5.99
</label>
<label>
<input name="product" value="1.99" type="checkbox" id="p3" onclick="total()"/>
Coke $1.99
</label>
<label>
Total
<input value="$0.00" readonly="readonly" type="text" id="total"/>
</label>
</fieldset>
<input value="Submit" type="submit"/>
<input value="Reset" type="reset"/>
</form>
JS-
function total() {
var input = document.getElementById("form");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total;
}
的三个问题
1:使用document.getElementsByName("product");
2:重命名函数。似乎使用total
作为字段的ID会干扰相同名称的功能
3:四舍五入结果
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total.toFixed(2);
}
<form action="" id="theForm">
<fieldset>
<legend>
Products
</legend>
<label>
<input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
Candy $12.95
</label>
<label>
<input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
Burger $5.99
</label>
<label>
<input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
Coke $1.99
</label>
<label>
Total
<input value="$0.00" readonly="readonly" type="text" id="total"/>
</label>
</fieldset>
<input value="Submit" type="submit"/>
<input value="Reset" type="reset"/>
</form>
此行。。。
var input = document.getElementById("form");
只返回一个id为form
的元素,而在您的示例中甚至不存在这样的元素。你要找的是…
var inputs = document.getElementsByName("product");
window.calculate = function(){
var total = 0;
var form = document.getElementById("theForm");
var inputs = form.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++){
if(inputs[i].getAttribute("name") == "product" && inputs[i].checked)
total += parseFloat(inputs[i].value);
}
alert(total);
}
<form action="" id="theForm">
<fieldset>
<legend>
Products
</legend>
<label>
<input name="product" value="12.95" type="checkbox" id="p1" onclick="calculate()"/>
Candy $12.95
</label>
<label>
<input name="product" value="5.99" type="checkbox" id="p2" onclick="calculate()"/>
Burger $5.99
</label>
<label>
<input name="product" value="1.99" type="checkbox" id="p3" onclick="calculate()"/>
Coke $1.99
</label>
<label>
Total
<input value="$0.00" readonly="readonly" type="text" id="total"/>
</label>
</fieldset>
<input value="Submit" type="submit"/>
<input value="Reset" type="reset"/>
</form>
只需创建一个表单变量并添加一个事件侦听器,即可侦听和修改输入文本,如
function total_price(){
let input = documnent.getElementsById('theForm'),
total = 0.00,
input = documnent.getElementsById('product');
for (let i = 0; i <input.length; input++){
if(input[i].checked){
total += parseFloat(input[i].value)
}
}
document.getElementById('total').value = total.toFixed(2)
}
document.getElementById('theForm').addEventListener('change', total_price)
相关文章:
- (php/jquery)根据另一个选中的复选框值隐藏和显示复选框
- 根据文本字段中的用户输入隐藏/显示复选框
- Javascript 显示复选框值与值中的空格中断
- 如何在 angularjs 中单击按钮时显示复选框列表
- 在单击按钮时在特定行中显示复选框
- 选择组合框后显示复选框
- 使用vuejs显示复选框选中的行
- 如何在提交前显示复选框值,或者在勾选时显示复选框本身
- 如何在数字框中显示复选框和下拉列表的乘积
- 选中单选框后显示复选框和文本字段的列表
- 如何使用jquery ajax显示复选框列表中的项目
- 单击按钮时显示复选框
- 正在寻找与don'“不再显示”复选框
- 使用字体显示复选框
- 显示'复选框仅在选中特定复选框时使用
- 滑动显示复选框
- 在angularjs中,如何在数据库中设置值时显示复选框为已选中
- 尝试在选择表单中的七个值之一时显示复选框
- 在同一页面上的表中显示复选框和表单数据
- 用JavaScript显示复选框的结果