我可以使用单选按钮/复选框代替 Javascript 计算器中的文本框吗？答案

【问题标题】：Can I use radio buttons/checkboxes in place of textboxes in a Javascript calculator?我可以使用单选按钮/复选框代替 Javascript 计算器中的文本框吗？
【发布时间】：2011-07-05 21:50:23
【问题描述】：

我有一个 Javascript 计算器，用户可以在其中输入产品/功能的数量，然后它将数量乘以设定的价格。然后，结果显示在下面的文本框中。我的两个问题是：

我可以使用<select> 选项并为每个选项指定一个值，如下所示：

<select name="SITE_EM_4.99" onChange="CalculateTotal(this.form)"> <option value=""> - Select - </option> <option value="1">Yes</option> <option value="0">No</option> </select>

但是，它不会让我对复选框/单选按钮做同样的事情。我该怎么做？

二：我可以更改脚本，使总数显示为实际文本，而不是文本字段吗？谢谢！

附：该脚本可以在HERE 找到。

【问题讨论】：

标签： javascript checkbox radio calculator

【解决方案1】：

单选按钮几乎可以做到这一点

<input type="radio" name="group1" value="Milk" onClick="CalculateTotal(this.form)" > Milk<br>
<input type="radio" name="group1" value="Butter" onClick="CalculateTotal(this.form)" > Butter<br>

第二题，很简单。

在要显示结果的位置放置一个带有 id 的空 div 标签。吨

然后在完成计算后使用下面的javascript将值作为文本插入到div标签中。

var output= document.getElementById("outputDiv")
output.innerText = {value of CalculateTotal()}

编辑：请求的示例

<script>
   function CalculateTotal(myForm)
   {
      //do your calculations here 
      //...
      //...
      var text = //put whatev here that will be the output
      var output= document.getElementById("outputDiv")
      output.innerText = text;
   }
</script>

<body>
   <input type="radio" name="group1" value="1" onClick="CalculateTotal(this.form)" > Yes<br>
   <input type="radio" name="group1" value="2" onClick="CalculateTotal(this.form)" > No<br>
   <div id="outputDiv"></div>

【讨论】：

@caleb 应该为你做这件事。总帐

【解决方案2】：

不用输入总计，只需切换到带有 id（比如说“总计”）的跨度（或其他内容），然后将其替换为 innerHTML

<script>
function CalculateTotal(frm) {
...
document.getElementById('total').innerHTML = round_decimals(order_total, 2);
...
}
</script>

【讨论】：

@medina-g：你是说有类似<div id="total"></div> 然后在脚本中添加document.getElementById('total').innerHTML = round_decimals(order_total, 2);？
我刚刚在 jsfiddle (jsfiddle.net/NwkQW/1) 中尝试过，它似乎可以工作（我只是复制并粘贴了你的源代码，所以它很乱呵呵，但是在 html 窗口中寻找“stackoverflow 更改”（两个总变化）。此外，您可能需要在重置表单时执行 codedocument.getElementById('total').innerHTML = "" code 之类的操作
哦！！！它现在有效，我知道我做错了什么；我放置了脚本的链接，而不是将其保存在文档中（以节省空间），这导致了混乱。有没有办法仍然链接到外部脚本并修复它？当您在表单中执行此操作时，您会执行 formId.elementId...等...您能给我一个示例，说明我可以链接到div 的方式吗？谢谢。
@medina-g：另外，我希望计算出的div 具有“$total”格式。（例如 $11.00）但是，如果我尝试在 <div id="totalDiv></div> 之前放一个 $ 符号，它会将值显示为“$ total”，在 $ 和值之间有一个空格（例如 $11.00）。我该如何解决？谢谢！
要在其中获取 $，您可以执行以下操作 codedocument.getElementById('total').innerHTML = "$" + round_decimals(order_total, 2);code 现在，了解发生了什么很重要，基本上通过设置元素的 innerHTML 的值，您将清除该元素内的任何 html/文本。

【解决方案3】：

<input type="checkbox" name="SITE_EM_4.99" value="1" onClick="CalculateTotal(this.form)">

【讨论】：

我之前试过了，但是如果取消选中它就不会回到之前的值。还是谢谢...

【解决方案4】：

<script>
document.write("Welcome to my world!!!");
</script>

此功能可用于在文档本身而不是在文本字段中打印文本。

【讨论】：

在该页面完成加载后调用 document.write 将把所有东西都吹走。
@BearedO 否决了 bc 这将导致他试图做的一切从页面上消失。