2009-08-24 3 views
4

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
     <script src="jquery.js" type="text/javascript"> 
     </script> 
     <script src="calc.js" type="text/javascript"> 
     </script> 
     <script src="calc_f.js" type="text/javascript"> 
     </script> 
     <script type="text/javascript"> 
      function DisplayPrice(price){ 
       $('#spn_Price').val(price); 
      } 
     </script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
      <input type="hidden" id="spn_Price" name="sum" value=""> 
      <br> 
      <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);"> 
      <br> 
      <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);"> 
      <br> 
      <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly"> 
     </form> 
    </body> 
</html> 

В этом коде тег ввода с именем totalSum где значение будет обновляться, но это не будет обновляться при изменении кнопок.

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

Я не знаю, правильно ли это сделать, я попытался изменить атрибут имени кнопок, когда пользователь нажимает их на sum, но это тоже не работало!

Вот плагин Адрес: http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

Как я могу это сделать?

ответ

21

Плагин schmugin. Избавиться от вашей OnClick и попробовать это:

$("input[type=radio]").click(function() { 
    var total = 0; 
    $("input[type=radio]:checked").each(function() { 
     total += parseFloat($(this).val()); 
    }); 

    $("#totalSum").val(total); 
}); 
+3

+1. Вот почему важно изучить общие основы языка, прежде чем изучать структуру. Никакой причины вообще не принести плагин в эту конкретную проблему. –

+0

Спасибо, но он не работает! – datisdesign

+1

Извините, его работа, мой плохой! :) – datisdesign

2

Untitled Document

<script type="text/javascript"> 
     function DisplayPrice(price){ 
      var val1 = 0; 
      for(i = 0; i < document.form1.price.length; i++){ 
       if(document.form1.price[i].checked == true){ 
        val1 = document.form1.price[i].value; 
       } 
      } 

      var val2 = 0; 
      for(i = 0; i < document.form2.price2.length; i++){ 
       if(document.form2.price2[i].checked == true){ 
        val2 = document.form2.price2[i].value; 
       } 
      } 

      var sum=parseInt(val1) + parseInt(val2); 
      document.getElementById('totalSum').value=sum; 
     } 
    </script> 
</head> 
<body> 
    Choose a number:<br> 
    <form name="form1" id="form1" runat="server"> 
     <br> 
     <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">159 
     <br> 
     <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">259 
     <br> 
    </form> 

    Choose another number:<br> 
    <form name="form2" id="form2" runat="server"> 
     <br> 
     <input id="rdo_1" type="radio" value="345" name="price2" onclick="DisplayPrice(this.value);">345 
     <br> 
     <input id="rdo_2" type="radio" value="87" name="price2" onclick="DisplayPrice(this.value);">87 
     <br> 
    </form> 
    <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly"> 


</body> 

Код выше будет динамически просуммировать значения проверяются из обеих групп. parseInt преобразуется в целые числа. В противном случае используйте parseFloat.

+0

работал для меня, спасибо и хорошую работу –

Смежные вопросы