javascript - Jquery选择所有带有数据价格的选中复选框并将它们添加在一起

Question

我正在创建一个自定义计算机大楼，但我很难更新总价格。

用户选择他们想要的处理器，然后使用data-price 添加价格。

这是我的 HTML

<div class="process_intel_options" style="display:block">
            <label class="option">
                <input type="radio" name="processor_options" value="i7950" data-price="155"  id="intel_options_0" checked="checked" />
                Intel Core i7 950 3.06Ghz
                </label>
            <br />
            <label class="option">
                <input type="radio" name="processor_options" value="i7960" data-price="250" id="intel_options_1" />
                Intel Core i7 960 3.20Ghz
                </label>
        </div>

        <div class="process_amd_options" style="display:none">
            <label class="option">
                <input type="radio" name="processor_options" value="i7950" data-price="150" id="amd_options_0" />
                AMD Core i7 950 3.06Ghz
                </label>
            <br />
            <label class="option">
                <input type="radio" name="processor_options" value="i7960" data-price="352" id="amd_options_1" />
                AMD Core i7 960 3.20Ghz
                </label>
        </div>

还有我的 JavaScript，我对 JavaScript 很陌生，所以请原谅任何小学生的错误!

var base_price = 300;
$("#final_price").html(base_price);

$("*").click(function() {
    // Update price

    // Select all checked
    $(":checkbox").each(function(index) {
        // Select all checked and with a price
        $(this).data("price").each(function(index) {
            // Add the prices
            base_price += $(this).data("price");
        });
    });
    $("#final_price").html(base_price);

});

它循环的原因是因为用户可以从 radio (或复选框)列表中选择显卡、主板等。

这是我的例子:http://genyx.co.uk/CCB/

请注意，当前只有处理器具有data-price。

Answer 1

您的示例存在几个逻辑问题，导致更改商品时价格无休止地上涨、页面加载时所选选项的成本不正确，以及使用多个选项 block 时也会出现问题。

首先，为需要包含在定价总计中的每个输入添加一个类，我在示例中使用了 calculation-item。消除了对 * 选择器的需要，这对于您的需要来说太过分了，而且速度也很慢。

var base_price = 300;
CalculatePrice();

$(".calculation-item").click(function() {
    CalculatePrice();
});


function CalculatePrice() {
    var base_cost = base_price;
    $(".calculation-item:checked").each(function(index) {
        base_cost += $(this).data("price");
    });

    $("#final_price").html(base_cost);   
}

Working fiddle