动态调整使用单选按钮的订单表总价

Question

我正在尝试使用Django/Python和JavaScript动态计算订单的总价。

我使用了单选按钮，这些按钮有预设的值，显示的内容取决于当前有哪些产品有库存，以及其他商品的支持情况。

举个例子：如果主板支持最大8GB的内存，就会显示4个单选按钮，分别是2GB、4GB、6GB和8GB。

这是我目前为这个输入字段设计的模板：

{% for ram in orderData.ram %}

<div class="field"><input id="ram{{forloop.counter}}" name="ram" type="radio" class="ram" value="{{ ram.id }}" price="{{ ram.price }}"{% ifequal ram.default 1 %} checked {% endifequal %}/><label>{{ ram.title }}</label> {% ifnotequal ram.price 0 %}<span class="price">add ${{ ram.price }}</span>{% endifnotequal %}</div>

{% endfor %}

我最开始打算用一个“价格”属性来存储价格，但现在的问题是，每当我选择不同的单选按钮时，它只显示第一个输入的价格。有没有办法解决这个问题？我尝试添加一个唯一的ID字段，但它仍然只抓取第一个单选按钮的值，这让这个字段几乎没用。

JavaScript/jQuery：

$("input").change(function(){

var id = $(".ram").attr("id");
alert(id);
alert($("#"+id).attr("price"));


});

我已经花了将近两个小时在想办法解决这个问题，但一直没头绪。任何帮助都非常感谢。

** 编辑 **

总结一下问题……我该如何只获取当前选中的单选按钮的价格。

Answer 1

var id = $(".ram") 这行代码会把所有带有这个类名的元素放到一个数组里。

接下来，这段代码会逐个处理这些元素。

$(".ram").each(function() {
     alert($(this).attr("price"))
})

你可以通过索引来单独访问它们，像这样：

for(var x=0;x<$(".ram").length;x++) {
    alert($(".ram").eq(x))
}

被选中的单选按钮是：

$('.ram:checked').attr("price")

Answer 2

给你来了：

$(function() {
    $('input[name="ram"]').change(function() {
        var id = $(this).val(); // currently selected value
        var price = $('input[name="ram"][value="'+id+'"]').attr('price');
    });
});