在我的情况下,我有无线电台线,每个无线电都有一个值。必须计算此值,并且结果必须放在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.这就是我的问题。我不知道如何找到之前选择的单选按钮来获取该值并减去它。
答案 0 :(得分: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>
上试用它
答案 1 :(得分:0)
您不需要减去。您只需找到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);
});
答案 2 :(得分: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。
答案 3 :(得分: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
中定义名称,而不是从文档中获取它们。