Динамически увеличивать / уменьшать общую стоимость в форме заказа, которая использует переключатели

Question

Я пытаюсь динамически рассчитать общую сумму заказа, используя Django / Python и Javascript.

Я использую переключатели с предопределенными значениями, которые отображаются в зависимости от того, какие продукты в настоящее время находятся вфондовый и что другие элементы поддерживают.

Пример: материнская плата, которая поддерживает максимум 8 ГБ оперативной памяти, будет отображать 4 переключателя, 2 ГБ, 4 ГБ, 6 ГБ и 8 ГБ

это то, что мой шаблонэто поле ввода выглядит так:

{% 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 %}

Я изначально планировал использовать атрибут «цена» для хранения цены, но на данный момент, когда я выбираю другую радиокнопку, он отображает толькоцена за первый вход.Есть ли способ обойти это?Я попытался добавить поле уникального идентификатора, но оно по-прежнему захватывает только первое значение радио ..., что делает его практически бесполезным.

javascript / jquery:

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

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


});

Я работалпри попытке найти способ обойти это на протяжении большей части двух часов, и я в замешательстве.Любая помощь будет принята с благодарностью.

** Редактировать **

Чтобы подвести итог вопроса ... как я могу получить только цену для переключателя, который в данный момент выбран.

Answer 1

Вот, пожалуйста:

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

Answer 2

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 3

Вам необходимо проверить атрибут .. ..attr ("флажок"), который покажет тот, который выбран.

Смотрите это обсуждение в другом месте ...

Как проверить, установлен ли флажок в jQuery?