javascript - jquery 检查单选框是否在价格计算器上被选中

Question

我有这段 JavaScript 可以根据单选/复选框选择来汇总总价

JQUERY

var price = 0;
$('.price-input').click(function () {
    if ($(this).is(":checked")) {
        price += parseInt($(this).attr("data-price"), 10);
        $('.total-price').text(price);
        $('.total-price-input').val(price);
    } else {
        price -= parseInt($(this).attr("data-price"), 10);
        $('.total-price').text(price);
        $('.total-price-input').val(price);
    }
});

HTML 是 3 个单选按钮和 3 个复选框的集合，其中单选按钮是一个价格，复选框可以将 3 个价格与单选按钮价格相加得出总价。

<input class="price-input" data-price="2000" id="ChosenLane" name="ChosenLane" type="radio" value="Konference - Spor 1: Lean">                         
<input class="price-input" data-price="1300" id="ChosenLane" name="ChosenLane" type="radio" value="Konference - Spor 2: Innovation">                          
<input class="price-input" data-price="1600" id="ChosenLane" name="ChosenLane" type="radio" value="Kage">

<input type="checkbox" name="lanes" value="Aften buffet" data-price="1000" class="price-input">      
<input type="checkbox" name="lanes" value="fthrctfyh" data-price="5456" class="price-input">
<input type="checkbox" name="lanes" value="dfhxfhg" data-price="54545" class="price-input">

总而言之，如果我选择一个单选按钮，它会将单选按钮的价格添加到价格中，但如果我再次单击一个单选按钮，它将再次将价格添加到总价中。我想要单选按钮，如果选择了一个则不要添加，而是只使用它的价格。

因此，如果我选中一个单选按钮，它会为价格加 2000，如果我单击另一个单选按钮，它会减去 2000 并增加 1300。

Answer 1

请检查以下解决方案:

JQUERY

$(function () {
    $('.price-input').change(function () {
        var price = 0;
        $('.price-input').each(function(){
            if ($(this).is(":checked")) {
             price += parseInt($(this).attr("data-price"), 10);
            }
        })
        $(".totalPrice").text(price);
    });
})

fiddle :http://jsfiddle.net/kkqqfaqv/