从复选框中添加/减去值
Adding/Subtracting values from a checkbox
我有一个复选框,默认情况下处于选中状态,值为 $50.00。现在我想,如果用户不想检查那 50.00 美元怎么办。所以,我只想问,我将如何自动将其添加到我的总计中,如果未选中,它将从总计中扣除?
.html
<input type="checkbox" checked value="50.00" id="cbx1" /><label>Upgrade for $50.00</label><br>
<input type="checkbox" value="10.00" id="cbx2" /><label>Package A</label><br>
<input type="checkbox" value="20.00" id="cbx3" /><label>Package B</label><br>
<input type="checkbox" value="30.00" id="cbx4" /><label>Package C</label><br>
<input type="checkbox" value="40.00" id="cbx5" /><label>Package D</label><br>
<input type="text" id="grandtotal"/> Total:
脚本
function grandtotal(){
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
if ($('#cbx1').is(":checked")) {
a = parseFloat($("#cbx1").val(), 10);
}
if ($('#cbx2').is(":checked")) {
b = parseFloat($("#cbx2").val(), 10);
}
if ($('#cbx3').is(":checked")) {
c = parseFloat($("#cbx4").val(), 10);
}
if ($('#cbx4').is(":checked")) {
d = parseFloat($("#cbx4").val(), 10);
}
if ($('#cbx5').is(":checked")) {
e = parseFloat($("#cbx5").val(), 10);
}
var total = a + b + c + d + e ;
$('#grandtotal').val('$' + total.toFixed(2));
我认为
你可以总结一下:
//add change event action on checkbox
$(":checkbox").on("change", function() {
//change input #grandtotal value according check/uncheck checkboxes
$("#grandtotal").val(function() {
//declare a variable to keep the sum of the values
var sum = 0;
//using an iterator find and sum the values of checked checkboxes
$(":checkbox:checked").each(function() {
sum += ~~$(this).val();
});
return sum;
});
});
//here change the value according on checked checkboxes on DOM ready event
$("#grandtotal").val(function() {
var sum = 0;
$(":checkbox:checked").each(function() {
sum += ~~$(this).val();
});
return sum;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked value="50.00" id="cbx1" />
<label>Upgrade for $50.00</label>
<br>
<input type="checkbox" value="10.00" id="cbx2" />
<label>Package A</label>
<br>
<input type="checkbox" value="20.00" id="cbx3" />
<label>Package B</label>
<br>
<input type="checkbox" value="30.00" id="cbx4" />
<label>Package C</label>
<br>
<input type="checkbox" value="40.00" id="cbx5" />
<label>Package D</label>
<br>
<input type="text" id="grandtotal" />Total:
试试这个。
<input type="checkbox" onclick="grandtotal()" value="50.00" id="cbx1" /><label>Upgrade for $50.00</label><br>
<input type="checkbox" onclick="grandtotal()" value="10.00" id="cbx2" /><label>Package A</label><br>
<input type="checkbox" onclick="grandtotal()" value="20.00" id="cbx3" /><label>Package B</label><br>
<input type="checkbox" onclick="grandtotal()" value="30.00" id="cbx4" /><label>Package C</label><br>
<input type="checkbox" onclick="grandtotal()" value="40.00" id="cbx5" /><label>Package D</label><br>
<input type="text" id="grandtotal"/> Total:
function grandtotal(){
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
if ($('#cbx1').is(":checked")) {
a = parseFloat($("#cbx1").val(), 10);
} else {
a=0;
}
if ($('#cbx2').is(":checked")) {
b = parseFloat($("#cbx2").val(), 10);
}else {
b=0;
}
if ($('#cbx3').is(":checked")) {
c = parseFloat($("#cbx4").val(), 10);
}else {
c=0;
}
if ($('#cbx4').is(":checked")) {
d = parseFloat($("#cbx4").val(), 10);
}else {
d=0;
}
if ($('#cbx5').is(":checked")) {
e = parseFloat($("#cbx5").val(), 10);
}else {
e=0;
}
var total = a + b + c + d + e ;
$('#grandtotal').val('$' + total.toFixed(2));
}
你可以这样做:使用onclick
function grandtotal(){
var a = 0;
if ($('#cbx1').is(":checked")) {
a = parseFloat($("#cbx1").val(), 10);
}
var total = a + 10.00 ;
$('#grandtotal').val('$' + total.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="50.00" id="cbx1" onclick="grandtotal()"/><label>Upgrade for $50.00</label><br>
Total:<input type="text" id="grandtotal" readonly/>
$("#cbx1").click(function () {
if ($('#cbx1').is(":checked")) {
a = parseFloat($("#cbx1").val(), 10);
var total = a + 10.00 ;
$('#grandtotal').val('$' + total.toFixed(2));
}
else{
$('#grandtotal').val('$'+10);
}
});
<input type="checkbox" value="50.00" id="cbx1" /><label>Upgrade for $50.00</label><br>
<input type="text" id="grandtotal"/> Total:
简单地循环检查复选框而不是单独检查怎么样?
grandTotal () {
var $packages = $('input:checked'),
total;
$packages.each(function(i, package){
total += $(package).val();
});
$('#grandtotal').val('$' + total);
}
然后在您需要更新价格时致电grandTotal。
编辑:I现在看到你说默认情况下选中文本框。因此,只需有一个 onLoad 函数来调用您的总计算。
然后:
将 onclick 属性添加到调用 grandtotal 函数的复选框中。
<input type="checkbox" onclick="grandtotal()" value="50.00" id="cbx1" />
在此处查看 JSFiddle
你能检查下面的jsfiddle链接吗,
http://jsfiddle.net/5udtC/7788/
更改脚本代码,如下所示,
$(document).ready(function () {
$("input").click(function () {
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
if ($('#cbx1').is(":checked")) {
a = parseFloat($("#cbx1").val(), 10);
}
if ($('#cbx2').is(":checked")) {
b = parseFloat($("#cbx2").val(), 10);
}
if ($('#cbx3').is(":checked")) {
c = parseFloat($("#cbx4").val(), 10);
}
if ($('#cbx4').is(":checked")) {
d = parseFloat($("#cbx4").val(), 10);
}
if ($('#cbx5').is(":checked")) {
e = parseFloat($("#cbx5").val(), 10);
}
var total = a + b + c + d + e ;
$('#grandtotal').val('$' + total.toFixed(2));
});
});
希望这对您有所帮助..谢谢。
试试这样...
$("#cbx1").click(function () {
var chk = $("#cbx1").val();
var total = 0;
if ($("#cbx1").prop("checked") == true) {
var gtotal = parseInt(total) + parseInt(chk);
} else {
var gtotal = parseInt(total);
}
$("#grandtotal").val(gtotal);
});
演示
相关文章:
- 动态添加复选框和输入框 jQuery
- 在输入类型数字更改时添加复选框
- 添加复选框标签中的值
- 在表中搜索相同的日期,并在td中添加复选框
- 想要添加复选框到动态创建的李
- 如何添加复选框选中的计数值
- 在PHP结果中添加复选框,并在一段时间后使用java逐个打开它们
- 使用JavaScript添加复选框值PHP、MySQL和alertbox
- 在运行时添加复选框并将其保存在 HTML 文件代码中
- 如何使用 javascript 添加复选框
- 在 AngularJS 中添加复选框以进行搜索
- Bootstrap 3.2:当使用jQuery添加复选框时,它不会在正确的css上可见
- 如何在提交按钮之前添加复选框
- extjs3.4如何在工具栏中动态添加复选框
- 如何在嵌入php的html表中为每一行添加复选框,并在数据库(Postgresql)中更新其值
- 在谷歌可视化栏旁边添加复选框
- 使用JS添加复选框,并在服务器端代码(ASP.NET)中找到它
- 动态添加复选框时,组中一个复选框选择的 JQuery 脚本不起作用
- 动态添加复选框,而不是模型绑定到IList
- 基于数组值javascript动态添加复选框