Добавление всего проверенных кнопок радио

Question

ОБНОВЛЕНИЕ

Если вы попробуете форму по этой ссылке http://jsfiddle.net/Matt_KP/BwmzQ/ на скрипке и выберете верхнюю правую радиокнопку £ 40, то увидите общую сумму заказа внизу.говорит 40 фунтов стерлингов.Затем, если вы выберете 75 фунтов стерлингов, общая сумма заказа изменится на 75 фунтов стерлингов, а затем, если вы вернетесь и снова проверите 40 фунтов стерлингов, общая сумма заказа составит 75 фунтов стерлингов + 40 фунтов стерлингов, тогда как для переключателя, который отмечен, должно быть всего 40 фунтов стерлингов.

UPDATE END

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

Также я использую пользовательский атрибут в радиокнопках data-price, который содержитзначение каждой радиокнопки, которая должна быть добавлена.

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

Это то, что я использую для суммирования проверенных кнопок радио:

<script type="text/javascript">
jQuery(document).ready(function($){
$('input:radio').change(function(){
var total = 0.0;
$('input:radio:checked').each(function(){
      total += parseFloat($(this).data('price'));
});
$('#total').val(total.toFixed(2));
});

})
</script>

Answer 1

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

Ваш сумасшедший jQuery-код для ограничения ввода - это просто смешно ... у вас есть имя, значение и ваши атрибуты цены-данных ... кажется, разделение каждой радиостанции, настроенной по элементу немного излишне для меня ..

Вот ограниченный пример (согласно нашему обсуждению в чате).

http://jsfiddle.net/CZpnD/ <- вот пример, с которым вы можете работать .. </p>

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

и для любви к Питу используйте этикетки!

Answer 2

HTML построен для этого.

<form name="myform">
    <input type="radio" name="foo" value="10" /> foo 
    <input type="radio" name="foo" value="30" /> bar 
</form>

Если вы присвоите радио-кнопкам одно и то же имя, тогда можно будет выбрать только одну.

Более того, когда вы получаете радиоэлемент, свойство .value представляет значение проверенной в настоящий момент радиокнопки

var myform = document.forms.myform;

var radio = myform.elements.foo;
var price = radio.value;

Обратите внимание, что radio является RadioNodeList, который возвращается только elements[name]

Пример

Однако выясняется, что поддержка RadioNodeList в браузере является ужасной, поэтому вам придется делать это вручную. Или используйте RadioNodeList polyfill

for (var i = 0, len = radio.length; i < len; i++) {
    var el = radio[i];
    if (el.checked) {
        var price = el.value;
        break;
    }
}