如何基于相同的单选按钮值进行不同的计算
How to make different calculations based on the same radio button values?
我是新手。我做了一个基于这篇文章的代码:SUM单选按钮值和复选框值在一个计算- javascript和html
我制作了两组单选按钮,值为1-5(第一组)和100-500(第二组)。我需要从每组中选择按钮的值来对它们进行不同的计算并显示结果。
这里我将第一组的值乘以2,并将第二组的值相加。现在我想显示另一个计算的结果。例如:
var sum=parseInt(val1-3) + parseInt(val2*4)
如何在不同的"单元格"中同时显示两个结果?
<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p><input id="rdo_1" type="radio" value="1" name="price" onClick="DisplayPrice(this.value);"><label for="radio1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price" onClick="DisplayPrice(this.value);"><label for="radio2">Radio 2</label></p>
<p><input id="rdo_3" type="radio" value="3" name="price" onClick="DisplayPrice(this.value);"><label for="radio3">Radio 3</label></p>
<p><input id="rdo_4" type="radio" value="4" name="price" onClick="DisplayPrice(this.value);"><label for="radio4">Radio 4</label></p>
<p><input id="rdo_5" type="radio" value="5" name="price" onClick="DisplayPrice(this.value);"><label for="radio5">Radio 5</label></p>
</form>
<hr>
<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p><input id="rdo_1" type="radio" value="100" name="price2" onClick="DisplayPrice(this.value);"><label for="rad1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="200" name="price2" onClick="DisplayPrice(this.value);"><label for="rad2">Radio 2</label></p>
<p><input id="rdo_3" type="radio" value="300" name="price2" onClick="DisplayPrice(this.value);"><label for="rad3">Radio 3</label></p>
<p><input id="rdo_4" type="radio" value="400" name="price2" onClick="DisplayPrice(this.value);"><label for="rad4">Radio 4</label></p>
<p><input id="rdo_5" type="radio" value="500" name="price2" onClick="DisplayPrice(this.value);"><label for="rad5">Radio 5</label></p>
</form>
<p><label for="valueTotal">Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2"readonly="readonly"> </p>
<script type="text/javascript">
function DisplayPrice(price)
{
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ )
{
if( document.form1.price[i].checked == true )
{
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ )
{
if( document.form2.price2[i].checked == true )
{
val2 = document.form2.price2[i].value;
}
}
var sum=parseInt(val1*2) + parseInt(val2);
document.getElementById('valueTotal').value=sum;
}
</script>
只需为您的结果定义不同的输入字段。
<p>
<label for="valueTotal1">Value1$:</label>
<input type="text" name="valueTotal1" id="valueTotal1"
value="" size="2" readonly="readonly" />
</p>
<p>
<label for="valueTotal2">Value2$:</label>
<input type="text" name="valueTotal2" id="valueTotal2"
value="" size="2" readonly="readonly" />
</p>
<p>
<label for="valueTotal3">Value3$:</label>
<input type="text" name="valueTotal3" id="valueTotal3"
value="" size="2" readonly="readonly" />
</p>
function DisplayPrice() {
for (i = 0; i < document.form1.price.length; i++) {
if (document.form1.price[i].checked == true) {
val1 = document.form1.price[i].value;
}
}
for (i = 0; i < document.form2.price2.length; i++) {
if (document.form2.price2[i].checked == true) {
val2 = document.form2.price2[i].value;
}
}
if (val1 != null && val2 != null) {
document.getElementById('valueTotal1').value = parseInt(val1) * 2 + parseInt(val2);
document.getElementById('valueTotal2').value = parseInt(val1) * 3 + parseInt(val2);
document.getElementById('valueTotal3').value = parseInt(val1) * 4 + parseInt(val2);
}
}
如果你被允许使用jQuery,你可以简化这个函数:
function DisplayPrice() {
var val1 = $('input[name=price]:radio:checked').val();
var val2 = $('input[name=price2]:radio:checked').val();
if(val1 != null && val2 != null) {
$('#valueTotal1').val(parseInt(val1) * 2 + parseInt(val2));
$('#valueTotal2').val(parseInt(val1) * 3 + parseInt(val2));
$('#valueTotal3').val(parseInt(val1) * 4 + parseInt(val2));
}
}
我创建了两个fiddle:使用jQuery和不使用
请注意另一件事:不要写parseInt(val1-3)
。在将字符串转换为整数之前,不能减去3。
编辑
如果希望使用默认值,可以在搜索选中的单选按钮之前将其写入变量中。如果未找到选中的按钮,则默认值将保持不变。另一种解决方案是检查变量是否仍然为空,并在搜索选中的按钮后用默认值填充它。
function DisplayPrice() {
//Default values - solution I
var val1 = 1;
var val2 = 1;
val1 = $('input[name=price]:radio:checked').val();
val2 = $('input[name=price2]:radio:checked').val();
//Default values - solution II
if(val1 == null) {
val1 = 1;
}
if(val2 == null) {
val2 = 1;
}
if(val1 != null && val2 != null) {
$('#valueTotal1').val(parseInt(val1) * 2 + parseInt(val2));
$('#valueTotal2').val(parseInt(val1) * 3 + parseInt(val2));
$('#valueTotal3').val(parseInt(val1) * 4 + parseInt(val2));
}
}
相关文章:
- 根据选中的按钮运行不同的计算时,设置单选按钮
- 使用单选按钮的输入计算分数
- 使用 Javascript 计算具有单选按钮、文本字段和滑块组合的表单字段
- 计算单选按钮的值
- 计算单选按钮的总和,显示总和,并传递给外部 Beanstream 服务器
- 激活单选按钮并计算文本框值
- 如何使用下拉菜单和单选按钮自动计算汇总表
- 计算单选按钮
- Javascript实时计算从单选按钮
- 计算两个单选按钮组的组合值
- 在javascript中使用单选按钮进行计算
- 如何在AngularJS中按名称计算单选按钮的数量
- 单选按钮值计算.第四种选择不会相加
- 我需要使用DOM计算一些选中的单选按钮的值
- 如何使用javascript自动计算单选按钮和复选框值
- 如何计算单选按钮组所需的ng错误
- 计算单选按钮的值,选择和复选框
- 根据选中的单选按钮计算Total As
- 如何使用单选按钮来计算高架图的输出
- 计算单选按钮中的值