1

就我而言，我有几行单选框，每个收音机都有一个价值。必须计算此值，并且必须将结果放在 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);
});

使用复选框它可以正常工作，但如果是无线电男孩，我没有点击事件来识别它，我必须减去。

在第一行我们看到收音机name=tools。在这里，我首先取这个值为 20 的值。之后，值 20 将显示在 中#result，很好。但是当我现在使用另一台收音机时name=tools，新值将增加到 20。这就是我的问题。我不知道如何找到之前选择的单选按钮来获取这个值并减去它。

4

4 回答 4

4

尝试使用这个：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/上试试它的演示

于 2013-04-22T11:48:02.637 回答
0

尝试使用以下代码：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而不是从文档中获取它们。

于 2013-04-22T12:10:54.850 回答
0

您可以使用闭包来跟踪值的对象文字：

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。

于 2013-04-22T11:36:28.237 回答
0

你不需要减法。您可以找到 2 diff 单选按钮的 2 个值：tools和addons. 然后只需添加它们并在div

You can get radio button value by 中写入：

$('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);
});
于 2013-04-22T11:27:47.077 回答