javascript - 从复选框中添加/减去值

Question

我有一个默认情况下选中的复选框，其值为 $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));

Answer 1

我想你可以总结为:

//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: