我有一个表格,人们可以在其中选择不同的选项来建立订单,即他们首先选择一个基本价格,然后添加该价格。单选按钮被隐藏,标签样式被设置为可点击区域。
要求包括能够取消选择单选按钮(即,如果需要,您可以将您的选择重置回空),我在下面的代码中可以正常工作。
我还必须将值写入页面上的其他元素。这也工作正常。
将不同组单选按钮的值添加在一起是不正确的。
$('.order-option + label').click(function(e) {
var radio = $(this).attr('for');
radio = $('#' +radio );
var spec_price = 0;
var env_price = 0;
switch($(radio).attr('name')) {
case 'specifications':
spec_price = parseInt(radio.val());
break;
case 'envelopes':
env_price = parseInt(radio.val());
break;
}
var total_price = +spec_price + env_price;
var desc = radio.data('title');
if(radio.is(':checked')) {
e.preventDefault();
radio.removeAttr('checked');
}
$('.order-preview-total').html('$'+total_price+' (inc gst)');
$('#order-preview-total').val('$'+total_price+' (inc gst)');
$('.order-preview-content').html(desc);
$('#order-preview-content').val(desc);
});
当我单击第二行单选按钮时,它只是覆盖价格,而不是添加价格。
如果再次取消选择所有单选按钮,也不会将总数重置为 0。
带有类名的元素(例如 .order-preview-total)是显示信息的元素,带有 ID 的元素是隐藏的表单元素,用于将数据传递到另一个表单。
编辑
根据要求,我创建了一个 JSFiddle 。如果单击第二行中的任何按钮,该值应添加到您在第一行中已选择的按钮中。如果您再次单击已选择的选项(即取消选择它),则应再次减去该值。
最佳答案
好吧,我想在总价的情况下,您需要在函数外部声明您的total_price变量并将其设置为等于0,否则每次单击单选按钮时它都会覆盖它。
如果选中按钮,则减去值。没有 HTML 很难说,但在我看来,您需要修改 if 语句,如下所示:
if(radio.is(':checked')) {
e.preventDefault();
var subtract = parseInt(this.val());
total_price = total_price - subtract;
radio.removeAttr('checked');
}
关于jquery - 将单选按钮的值相加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20065244/