Как я могу получить итоговые значения для нескольких радиобутин при выборе с помощью JavaScript?

Question

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

Может ли кто-нибудь указать мне правильное направление или поделиться кодом, если он у вас есть? Спасибо!

Answer 1

Вместо того, чтобы вычитать старое значение и добавлять новое значение, я просто пересчитываю общее значение каждый раз. Таким образом, вам не нужно беспокоиться о отслеживании старого значения для каждой группы. Вы можете использовать JQuery для упрощения вещей, но в простом JavaScript что-то вроде следующего будет работать, чтобы просто перебрать все переключатели и добавить значения тех, которые в настоящее время проверены:

function calculateTotal() {
   var x = document.getElementsByTagName("input");
   var i,
       total = 0;
   for(i=0; i < x.length; i++){
       if (x[i].type == "radio" && x[i].checked)
          total += parseInt(x[i].value,10);
   }
   // display total somewhere;
}

Либо установите обработчик onclick для каждой радиокнопки для вызова calculateTotal, либо установите одиночный onclick для некоторого родительского контейнера.

Answer 2

как-то так http://jsfiddle.net/robx/KXEmW/ Я привел простой пример просто добавления нового значения. Так что вам просто нужно сделать математику, чтобы сложить / вычесть что и когда.

Answer 3

Используя jQuery, если у вас есть html, подобный этому:

<form id="form1">
  <input type="radio" name="chk" value="1">
  <input type="radio" name="chk" value="2">
  <input type="radio" name="chk" value="3">
</form>
<form id="form2">
  <input type="radio" name="chk" value="1">
  <input type="radio" name="chk" value="2">
  <input type="radio" name="chk" value="3">
</form> ...

и где-то у вас есть ...

<input type="text" name="total" value="">

jQuery для вычисления суммы будет выглядеть так:

var form1Val = parseInt($('#form1 input[name$=chk]').val());
var form2Val = parseInt($('#form2 input[name$=chk]').val());
var total = form1Val + form2Val + ...;
$('input[name$=total]').val(total);

Конечно, вы можете сделать цикл для каждой формы, а затем суммировать их позже.

PS Код не проверен

Answer 4

JQuery - короткий ответ. Вы можете найти множество примеров в Google и на jquery.com. Привязать, чтобы щелкнуть событие радиокнопки, а затем сделать то, что вы должны сделать.