如何从选定的收音机中获取数值？

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

你不需要减少。你可以找到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 2

您可以使用跟踪值的对象字面，使用闭包：

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 object literal tracking当前无线电值（元素的名称用作属性）。我也一直在关闭中提及$('#result')股利。这样，每次调用回调函数时都不必查询DOM。

Answer 3

尝试使用这样的： 的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 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中定义名称，而不是从文档中获取它们。