如何從之前選擇的收音機中獲取價值？

Question

在我的情況下，我有無線電台線，每個無線電都有一個值。 必須計算此值，並且結果必須放在DIV中。

我的問題是，我找不到一種方法來減去之前選擇的輻射值。 讓我給你看一個示例標記：

<table>
      <tr>
        <td><input name="tools" value="20" type="radio"></td>
        <td><input name="tools" value="300" type="radio"></td>
        <td><input name="tools" value="1000" type="radio"></td>
     </tr>
     <tr>
       <td><input name="addons" value="5" type="radio"></td>
       <td><input name="addons" value="10" type="radio"></td>
     </tr>
</table>
<div id="result"></div>

JavaScript：

var radioClick   = $('input[type="radio"]');

radioClick.on('change', function(evt){

      // function sub or add the price... 
      // here is a shortcut of the add calc version...
      var price = $(this).val(),
      showPrice = $('#result').text(),
      endresult = parseFloat(showPrice) + parseFloat(price),
      $('#result').text(endResult);
});

使用復選框它可以正常工作，但是對於radioboyes我沒有點擊事件來識別這個我必須減去。

在第一行，我們看到無線電name=tools 。 在這里，我首先考慮這個值為20的值。之后，值20將顯示在#result ，很好。 但是，當我現在采取另一個無線電name=tools ，新值將添加到20.這就是我的問題。 我不知道如何找到之前選擇的單選按鈕來獲取此值並減去它。

Answer 1

試試這個：html代碼：

<table>
  <tr>
    <td><input name="tools" class="test1" value="20" type="radio"></td>
    <td><input name="tools" class="test1" value="300" type="radio"></td>
    <td><input name="tools" class="test1" value="1000" type="radio"></td>
 </tr>
 <tr>
   <td><input name="addons" class="test" value="5" type="radio"></td>
   <td><input name="addons" class ="test" value="10" type="radio"></td>
 </tr>

JavaScript的：

<script>

var testPrice  = 0;
var test1Price = 0;
var endprice = 0;
var price ='';
 $('.test').click(function(){
 price = $(this).val();
 testPrice = price;
 endPrice = parseFloat(testPrice) + parseFloat(test1Price),

  $('#result').text(endPrice);
 });
 $('.test1').click(function(){
 var price = $(this).val();
  test1Price = price;
   endPrice = parseFloat(testPrice) + parseFloat(test1Price),
  $('#result').text(endPrice);
  });


   </script>

試試http://jsfiddle.net/rxrzX/上的演示

Answer 2

您不需要減去。 你可以找到2個diff單選按鈕的2個值： tools和addons 。 然后只需添加它們並寫入div

你可以通過以下方式獲得單選按鈕值

$('input[name=radioName]:checked').val();

試試這個：

var radioClick   = $('input[type="radio"]');

radioClick.on('change', function(evt){
      // function sub or add the price... 
      // here is a shortcut of the add calc version...
      var toolsprice = $('input[name=tools]:checked').val(),
      var addonsprice = $('input[name=addons]:checked').val(),
      endresult = parseFloat(toolsPrice) + parseFloat(addonsprice),
      $('#result').text(endResult);
});

Answer 3

您可以使用閉包來使用跟蹤值的對象文字：

radioClick.on('change', (function()
{
    var valTracker = {},
    resultDiv = $('#result');//easier on the DOM
    return function(evt)
    {
        valTracker[this.name] = valTracker[this.name] || 0;//get old value
        var endResult = parseFloat(resultDiv.text()) + parseFloat($(this).val()) - valTracker[this.name];//subtract old value, too
        valTracker[this.name] = parseFloat($(this).val());//set current value
        resultDiv.text(endResult);
    }
}()));

valTracker對象文字跟蹤當前的無線電值（元素的名稱用作屬性）。 我還在閉包中保留了對$('#result') div的引用。 這樣，每次調用回調函數時都不必查詢DOM。

Answer 4

嘗試使用以下代碼： JSFIDDLE

var radio_groups = []
$(":radio").each(function(){
    if (radio_groups.indexOf(this.name) == -1){
        radio_groups.push(this.name);
    }
});

$('input:radio').change(function(evt){
    var resultPrice = 0;
    $.each(radio_groups, function(){
        curPrice = $(':radio[name="' + this + '"]:checked').val();
        if (!(curPrice)){
            curPrice = 0;
        }
        resultPrice = parseInt(resultPrice) + parseInt(curPrice);
    });
    $('#result').text(resultPrice);
});

即使您添加更多單選按鈕組，這也可以。 如果只希望此功能用於特定組，請在數組radio_groups定義名稱，而不是從文檔中獲取它們。