使用jQuery添加和减去值
Add and subtract values with jQuery
需要帮助处理以下jQuery代码;
我想做的是;
- 将Amount加入Total
- 当数量添加时,复选框值得到double
- 如果复选框状态改变,则复选框更新值相应地减去或添加到Total
- 如果从总数中减去金额,复选框值将变回原始
- 如果复选框状态改变,则复选框更新值相应地减去或添加到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>
相关文章:
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 通过jQuery添加ng样式属性,angular不更新
- 使用HTML5 localStorage和jQuery添加到收藏夹/书签
- jQuery添加的文本不显示
- 使用Jquery添加内容
- 如何使用jQuery添加另一个对象的高度作为边距
- JavaScript/jQuery-添加添加和删除类与下一个函数之间的延迟
- 对于每个json结果,使用类jquery添加css
- Jquery添加一个类之后,如何应用css
- 使用jQuery添加和删除属性
- Jquery添加输入字段和日期选择器
- jQuery - 添加删除类 - 设置输入值
- 为什么在这种情况下要向JQuery添加两个链接
- 为图像滑块jquery添加项目符号功能
- 使用jquery添加到表单内部表中的元素不会过帐
- 如何使用jquery添加元素
- 使用Jquery添加XML元素
- 当使用javascript/jquery添加值时,html文本输入表显示不正确
- 将jquery添加到firefox扩展中
- 运行 AJAX 需要什么 - 将 jQuery 添加到页面处理 AJAX 调用