使用 jQuery 添加和减去值

Question

需要以下 jQuery 代码的帮助；

我想做的是；

将金额加到总计
当添加的数量 Checkbox 值翻倍时
如果复选框状态改变，复选框更新值相应地减去或添加到总计
如果金额从总计中减去，复选框值将变回原始值
如果复选框状态改变，复选框更新值相应地减去或添加到总计

以下是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>

使用 jQuery 添加和减去值

Add and subtract values with jQuery

html

javascript

checkbox

jquery