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个差异单选按钮的值：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中定义名称，而不是从文档中获取它们。

如何从之前选择的收音机中获取价值？

4 个答案: