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

Question

我正在尝试为客户编写一个非常简单的价格计算器。 希望用户能够输入以英寸为单位的宽度和长度，然后从一组单选按钮中选择一种产品来确定价格。 最后的计算将是宽度x长度x价格。 我可以获取脚本来计算宽度和长度，但是我不确定如何通过选中的单选按钮设置价格的var。 在此先感谢您可以提供帮助的任何人。 我还想将结果限制为仅两位小数。 代码如下。

<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 个解决方案

解决方案1
1 2013-12-31 03:11:00

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

问题描述

1 个解决方案

解决方案1 1 2013-12-31 03:11:00

解决方案1
1 2013-12-31 03:11:00