Javascript 从复选框中添加/减去值

我有一个默认选中的复选框，其值为$50.00。现在我想，如果用户不想检查那50美元怎么办。所以，我只是想问，我如何自动将其添加到我的grandtotal中，如果未选中，它将从grandtotal中扣除

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:

---

编辑：我看到你现在说文本框默认选中。所以只要有一个onLoad函数调用您的总计算

然后：

向调用grandtotal函数的复选框添加onclick属性

<input type="checkbox" onclick="grandtotal()" value="50.00" id="cbx1" />

---

您可以这样做：使用

onclick

函数grandtotal（）{
var a=0；
如果（$（'#cbx1'）。为（“：选中”））{
a=parseFloat（$（“#cbx1”）.val（），10）；
}
var总计=a+10.00；
$（'grandtotal'）.val（'$'+total.toFixed（2））；
}

升级至$50.00

总计：

$（“#cbx1”）。单击（函数（）{
如果（$（'#cbx1'）。为（“：选中”））{
a=parseFloat（$（“#cbx1”）.val（），10）；
var总计=a+10.00；
$（'grandtotal'）.val（'$'+total.toFixed（2））；
}
否则{
$（'grandtotal'）.val（'$'+10）；
}
});
升级50.00美元

总计：
像这样试试

$（“#cbx1”）。单击（函数（）{
var chk=$（“#cbx1”）.val（）；
var合计=0；
if（$（“#cbx1”）.prop（“选中”）==true）{
var gtotal=parseInt（总计）+parseInt（chk）；
}否则{
var gtotal=parseInt（总计）；
}
美元（“#总计”）.val（总金额）；
});

简单地循环检查复选框，而不是单独检查，怎么样

    grandTotal () {
        var $packages = $('input:checked'),
            total;

        $packages.each(function(i, package){
             total += $(package).val();
        });

        $('#grandtotal').val('$' + total);
    }

然后打电话给grandTotal as，当您需要更新价格时，我想您可以总结如下：


//在复选框上添加更改事件操作
$（“：复选框”）。在（“更改”，函数（）上{
//根据选中/取消选中复选框更改输入#总计值
$（“#grandtotal”）.val（函数（）{
//声明一个变量以保持值的总和
var总和=0；
//使用迭代器查找选中复选框的值并求和
$（“：复选框：选中”）。每个（函数（）{
sum+=~~$（this.val（）；
});
回报金额；
});
});
//这里根据DOM就绪事件上的复选框更改值
$（“#grandtotal”）.val（函数（）{
var总和=0；
$（“：复选框：选中”）。每个（函数（）{
sum+=~~$（this.val（）；
});
回报金额；
});

升级为$50.00


A包


B包


包C


D包


总计：
试试这个..

    <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));
}

升级50.00美元

A包

B包

包装C

包D

总数：
函数grandtotal（）{
var a=0；
var b=0；
var c=0；
var d=0；
var e=0；
如果（$（'#cbx1'）。为（“：选中”））{
a=parseFloat（$（“#cbx1”）.val（），10）；
}否则{
a=0；
}
如果（$（'#cbx2'）。为（“：选中”））{
b=parseFloat（$（“#cbx2”）.val（），10）；
}否则{
b=0；
}
如果（$（'#cbx3'）。为（“：选中”））{
c=parseFloat（$（“#cbx4”）.val（），10）；
}否则{
c=0；
}
如果（$（'#cbx4'）。是（“：选中”））{
d=parseFloat（$（“#cbx4”）.val（），10）；
}否则{
d=0；
}
如果（$（'#cbx5'）。是（“：选中”））{
e=parseFloat（$（“#cbx5”）.val（），10）；
}否则{
e=0；
}
var总计=a+b+c+d+e；
$（'grandtotal'）.val（'$'+total.toFixed（2））；
}
请检查下面的JSFIDLE链接


按如下所示更改脚本代码

$(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));
});

 });

希望这对您有所帮助。谢谢。
我们可以看看其余的代码吗，您是如何启动grandtotal（）的？另外，$（'grandtotal'）.val（总计）；你不能将
parseFloat
与基本图形一起使用，这是专门用于
parseInt
的。我已经编辑了我的问题@atmdyou，最好使用循环：类似这样的东西（不运行，所以语法可能会关闭）我忘了默认情况下它是选中的，因此，我想要的是该值将显示在grandtotal中，并与其他值一起添加，如果用户决定不检查它，则值50.00将不会与其他值一起添加。
$(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));
});

 });