Question

我正在为客户写一个非常简单的价格计算器。希望用户能够以英寸为单位输入宽度和长度，然后从一组单选按钮中选择产品以确定价格。最终的计算将是宽x长x价。我可以让脚本计算宽度和长度，但我不知道如何从所选的单选按钮设置价格的var。提前感谢任何可以帮助解决此问题的人。我还想将结果限制为只有2位小数。代码如下。

<html>
<head>
<title>Calculator</title>
  <script type="text/javascript">
  //calculator
  function cal() {
  var x=document.form.length.value
  var y=document.form.width.value

  var a=x*y 
  var p=document.form.radio.value
  var total=a*p 
document.form.total.value=total;
}
</script>
</head>
<body>

<h3>Project cost calculator:</h3>
<form action="" name="form">
  <p><input type="text" name="length" size="4" /> 
  Enter the length of your banner in inches.<br />
  <input type="text" name="width" size="4" /> 
  Enter the width of your banner in inches.</p>
  <p>
<input type="radio" name="radio" id="paper" value="0.0625">
paper</label>
<input type="radio" name="radio" id="vinyl" value="0.08333333">
<label for="product">vinyl</label>
  </p>
<p><b>Click this button to calculate the approximate cost of your project:</b><br />
  <input type="button" name="money" value="calculate" onclick="cal()" /></p>

  <p> <input type="text" name="total" size="6" /></p>
</form>
</body>
</html>

Answer 1

替换您的代码

var p=document.form.radio.value

带

var p=document.querySelector('input[name = "radio"]:checked').value

更新：以上代码在IE中不起作用，因此，应使用以下代码

if( document.getElementById("paper").checked == true ){
    var p=document.getElementById("paper").value;
}
else{
    var p=document.getElementById("vinyl").value;
}

带有单选按钮选项的Javascript价格计算器

1 个答案: