Как получить значение от выбранного радио?

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 у ​​меня нет щелчок-событие, чтобы определить это на I должны вычесть.

В первой строке мы видим радиостанции name=tools. здесь я беру сначала этот со значением 20. после этого значение 20 будет показано в #result, штраф. Но когда я возьму еще одно радио name=tools, новое значение добавит к 20. И это моя проблема. Я не знаю, как найти ранее выбранный переключатель, чтобы получить это значение и вычесть его.

Answer 1

Вам не нужно вычитать. Вы можете просто найти 2 значения переключателя 2 diff: 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 литерал объекта отслеживает текущее значение радио (имя элемента используется как свойство). Я также сохранил ссылку на div $('#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 вместо того, чтобы получать их из документа.