如何計算使用jQuery的單選按鈕值的總和？

我想創建一個包含許多單選按鈕的組。當用戶選擇一個按鈕時，我想計算每個選定的單選按鈕值的總和並將該總和顯示給用戶。如何計算使用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

我怎樣才能做到這一點？

來源

2009-08-24 datisdesign

Plugin schmugin。擺脫你的onclick和嘗試這個辦法：

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

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

來源

2009-08-24 21:03:38

+1。這就是爲什麼在學習框架之前學習一門語言的基礎知識是很重要的。根本沒有理由把一個插件帶入這個特殊的問題。 – 2009-08-24 21:07:40

謝謝，但它不工作！ – datisdesign 2009-08-24 21:24:55

對不起，它的工作，我的壞！ :) – datisdesign 2009-08-24 21:30:55

無標題文檔

<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>

上面的代碼將dinamically來自這兩個組的總結檢查的值。 parseInt將轉換爲整數。否則使用parseFloat。

來源

2009-08-24 21:32:02

爲我工作，感謝和好工作 – 2014-08-07 11:26:36

如何計算使用jQuery的單選按鈕值的總和？

回答

相關問題