使用jQuery添加和减去值

Add and subtract values with jQuery

本文关键字:jQuery 添加 使用      更新时间:2023-09-26

需要帮助处理以下jQuery代码;

我想做的是;

  1. 将Amount加入Total
  2. 当数量添加时,复选框值得到double
  3. 如果复选框状态改变,则复选框更新值相应地减去或添加到Total
  4. 如果从总数中减去金额,复选框值将变回原始
  5. 如果复选框状态改变,则复选框更新值相应地减去或添加到Total

下面是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);
});

这是小提琴,解释得更好;

更新小提琴:
http://jsfiddle.net/55n8acus/7/

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

谢谢你的帮助

问候。

我从问题中可以理解的是,你想从总价中减去值,但是你不小心使用#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提琴:- 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>