Расчет радиокнопки

Question

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

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

Любые предложения без использования javascript или использования значений?

<input class="radio" type="radio" name="keystage1yr1" value="Paper" /> <span>&#163;25</span> 

<input class="radio" type="radio" name="keystage1yr1" value="CD" /> <span>&#163;25 excl VAT</span> 

<input class="radio" type="radio" name="keystage1yr1" value="Paper & CD" /> <span>&#163;40 excl VAT</span> 

<input class="radio" type="radio" name="keystage1yr2" value="Paper" /> <span>&#163;25</span> 

<input class="radio" type="radio" name="keystage1yr2" value="CD" /> <span>&#163;25 excl VAT</span> 

<input class="radio" type="radio" name="keystage1yr2" value="Paper & CD" /> <span>&#163;40 excl VAT</span> 

<input class="radio" type="radio" name="keystage1save" value="Paper" /> <span>&#163;47.50</span> 

<input class="radio" type="radio" name="keystage1save" value="CD" /> <span>&#163;47.50 excl VAT</span> 

<input class="radio" type="radio" name="keystage1save" value="Paper & CD" /> <span>&#163;75 excl</span> 

Можно ли добавить что-то вроде price="20" и т.д. для каждой кнопки радио, а затем добавить их вверх?

EDIT

@Jamiec ответ работал прекрасно добавив лишний «данные цену» felid и общий объем с помощью некоторых JavaScript.

Хорошо, поэтому после игры с кодом Ямеца я понял, что он добавляет общее количество переключателей, которые были проверены, но больше не проверены. Как я также есть некоторые JavaScript, который выполняет следующие действия:

Можно выбрать только один переключатель из name="keystage1yr1" только одна кнопка радио из name="keystage1yr2" можно выбрать

Но если переключатель из name="keystage1save" выбран, то любой радио от name="keystage1yr1" и name="keystage1yr2", который был выбран, будет отменен.

Проблема заключается в том, что при javascript, предоставленном @Jamiec, сумма будет по-прежнему иметь значения name="keystage1yr1" и name="keystage1yr2", если выбрано name="keystage1save". Мне это нужно просто вычислить сумму от радиокнопок, которые выбрано

EDIT2 @Jamiec обновленного ответ не сохранять значения в кэше фиксированных проблема

Answer 1

Без Javascript, нет - Определенно нет.

Синтаксический текст внутри пролете рядом с каждым радио с помощью Javascript, да - но довольно сложно

Добавление дополнительного атрибута радио, содержащего необработанный количество, использовать Javascript, да - не очень жесткий

Добавляя дополнительный атрибут (желательно data-amount), вы можете использовать библиотеку, такую ​​как jQuery, да - легкая лихорадка лисички!

---

Пример использования jQuery.

Дополняя каждый из вашего радио, как:

<input class="radio" type="radio" name="keystage1yr1" value="Paper" data-price="25" /> <span>&#163;25</span> 

Добавить общее поле как:

<input id="total" type="text"> 

и использовать следующий код.

var values = {}; // index to store the selection from each named group of radio's 

$('input:radio').change(function(){ 
    var name = $(this).attr('name'); 
    values[name] = parseFloat($(this).data('price')); 
    var total = 0.0; 
    $.each(values,function(i,e){ 
     total += e; 
    }); 
    $('#total').val(total.toFixed(2)); 
}); 

Живой пример: http://jsfiddle.net/UL2JP/

---

Редактировать, приведенный выше код имеет только сложить эти флажки, которые проверяются, к сожалению, он кэширует, что ранее был выбран в JavaScript Object values. Если вы, используя код, отмените выбор некоторых флажков, вам нужно перерасчитать то, что выбрано.

Обновление для этого кода, как представляется, сделать то, что вы описали в комментариях:

var values = {}; 

$('input[name="keystage1save"]').click(function(){ 
    $('input:radio:not([name="keystage1save"])').prop('checked',false); 
    values = {}; 
}); 

$('input:radio').change(function(){ 
    var name = $(this).attr('name'); 
    values[name] = parseFloat($(this).data('price')); 
    var total = 0.0; 
    $.each(values,function(i,e){ 
     total += e; 
    }); 
    $('#total').val(total.toFixed(2)); 
}); 

Живой пример: http://jsfiddle.net/UL2JP/1/

---

Edit 2: Просто мысли, нет необходимости чтобы кэшировать выбранные значения, было бы быстрее просто рассчитывать «на лету»:

$('input[name="keystage1save"]').click(function(){ 
    $('input:radio:not([name="keystage1save"])').prop('checked',false); 
}); 

$('input:radio').change(function(){ 
    var total = 0.0; 
    $('input:radio:checked').each(function(){ 
      total += parseFloat($(this).data('price')); 
    }); 
    $('#total').val(total.toFixed(2)); 
}); 

Живой пример: http://jsfiddle.net/UL2JP/2/

Answer 2

если вы строите это с помощью какого-то кода сервера, используйте это для расчета общей стоимости

Answer 3

Вы могли бы сделать три вещи:

• Использование AJAX ванной сделать это правильно серверный
• Создать массив с идентификаторами радиокнопок и значений, и OnClick поиска значение и добавьте это к итогу
• Неправильное использование атрибута идентификатора для хранения значения и записи некоторого JS для его добавления. Например # val1_1 # val2_4 и т.д. (не рекомендуется)

Вы хотите, чтобы я eleborate на одном из этих вариантов.

Если вы не хотите использовать AJAX, я бы предложил перейти к варианту 2, это довольно изящно.

HTML:

<input class="radio" type="radio" id="ks1p" name="keystage1yr1" value="Paper" /> <span>&#163;25</span> 

<input class="radio" type="radio" id="ks1c" name="keystage1yr1" value="CD" /> <span>&#163;25 excl VAT</span> 

<input class="radio" type="radio" id="ks1cp" name="keystage1yr1" value="Paper & CD" /> <span>&#163;40 excl VAT</span> 

<input class="radio" type="radio" id="ks2p" name="keystage1yr2" value="Paper" /> <span>&#163;25</span> 

//etc.. 

JS:

var prices= new Array(); 
prices["ks1p"]=1; 
prices["ks1c"]=2; 
prices["ks1cp"]=3; 
//etc 
var lastPrice = new Array(); 
lastPrice ["keystage1yr1"]=0; 
lastPrice ["keystage1yr2"]=0; 
//etc 
var totalPrice = 0; 
$('.radio').click(function(){ 
    var id = $(this).attr('id'); 
    var name= $(this).attr('name'); 
    if(lastPrice[name] != 0){ 
    totalPrice = totalPrice - lastPrice[name]; 
    } 
    lastPrice[name] = prices[id]; 
    totalPrice = totalPrice + prices[id]; 
    alert(totalPrice); 
}); 

Fiddle: http://jsfiddle.net/nggLr/