javascript - 使用 jQuery 添加和减去值

Question

需要有关以下 jQuery 代码片段的帮助；

我想做的是；

1. 将金额添加到总计
2. 当添加的金额复选框值加倍时
3. 如果复选框状态发生变化，复选框更新值相应减去或添加到总计中
4. 如果金额减去总计，复选框值将更改回原始值
5. 如果复选框状态发生变化，复选框更新值相应减去或添加到总计中

下面是一段 jQuery 代码

$('#Addcar').on('click', function() {
if($(this).html()=='Add') {
    $(this).html('Remove');
    var tot = parseFloat($('#TotalAmount').val()) + parseFloat($('#QuoteAmount').val());
    var totcan = parseFloat($('#Cancelation').val()) + 2;
    $('#TotalPrice').val(tot);
    $('#Cancelation').val(totcan);
} else {
    $(this).html('Add');
    var tot = parseFloat($('#TotalPrice').val()) - parseFloat($('#QuoteAmount').val());
    var totcan = parseFloat($('#Cancelation').val()) - 2;
    $('#TotalPrice').val(tot);
    $('#Cancelation').val(totcan);
}
});

$('#Cancelation').change(function(){
if($(this).is(':checked')){
    total = parseFloat($('#TotalPrice').val()) + Number($(this).val());
} else {
    total = parseFloat($('#TotalPrice').val()) - Number($(this).val());
}
$('#TotalPrice').val(total);
});

这是更好解释的 fiddle ；

更新的 fiddle :
http://jsfiddle.net/55n8acus/7/

如果添加了 QuoteAmount 值并将复选框值从 Total 中删除，然后删除 QuoteAmount 值，结果值将是错误的，它应该是 52 而不是 48，原因是复选框不会更新，并且它仍然从 Total 中删除 4，而不是应该删除 2。

感谢大家的帮助

问候。

Answer 1

我从问题中可以理解的是，您想要从总价中减去该值，但当您点击时，您不小心使用了 #TotalValue 而不是 #TotalPrice在复选框上，将代码更改为此，它将按预期工作。

$('#Cancelation').change(function(){
if($(this).is(':checked')){
    total = parseFloat($('#TotalPrice').val()) + Number($(this).val());
} else {
    total = parseFloat($('#TotalPrice').val()) - Number($(this).val());
}
$('#TotalPrice').val(total);
});

这是更新后的 js fiddle :- jsfiddle.net/55n8acus/8

$('#Addcar').on('click', function() {
    if($(this).html()=='Add') {
        $(this).html('Remove');
        var tot = parseFloat($('#TotalAmount').val()) + parseFloat($('#QuoteAmount').val());
        var totcan = parseFloat($('#Cancelation').val()) + 2;
        if(!$("#Cancelation").is(':checked')){
            tot = tot -4;
        }
        $('#TotalPrice').val(tot);
        $('#Cancelation').val(totcan);
        $('#Cancel').html(totcan);        
    } else {
        $(this).html('Add');
        var tot = parseFloat($('#TotalPrice').val()) - parseFloat($('#QuoteAmount').val());
        if(!$("#Cancelation").is(':checked')){
            tot +=2;
        }
        var totcan = parseFloat($('#Cancelation').val()) - 2;
        $('#TotalPrice').val(tot);
        $('#Cancelation').val(totcan);
        $('#Cancel').html(totcan);
    }
});

$('#Cancelation').change(function(){
    if($(this).is(':checked')){
        total = parseFloat($('#TotalPrice').val()) + Number($(this).val());
    } else {
        total = parseFloat($('#TotalPrice').val()) - Number($(this).val());
    }
    $('#TotalPrice').val(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:;" id="Addcar">Add</a><br>
<input type="text" id="QuoteAmount" value="50" />
<input type="text" name="TotalAmount" id="TotalAmount" value="52" /><br>
<input type="text" name="TotalPrice" id="TotalPrice" value="0" /><br>
<input type="checkbox" id="Cancelation" value="2" checked> <span id="Cancel">2</span>