单击复选框时计算总计

Question

我有一个由此代码表示的单选按钮列表：

<form id="menu4strombolis">
    input1 <input type="radio" name="menu1"><br />
    input2 <input type="radio" name="menu2"><br />
    input3 <input type="radio" name="menu3"><br />
    input4 <input type="radio" name="menu4"><br />
    input5 <input type="radio" name="menu5"><br />
    input6 <input type="radio" name="menu6"><br />
    input7 <input type="radio" name="menu7"><br />
</form>

每当选择一个按钮时，我需要更新小计和总数。

这就是我想要的样子。

Subtotal: <br />
Tax:<br />
Total:<br />

税收总是％7或.7

菜单1到7的价格增加5美元。 Menu1是5美元，menu2是10美元，等等。

我试图弄清楚JavaScript，但问题是我不希望它显示在页面底部显示的按钮之后。
如果我document.write，整个页面都会被覆盖。请帮我解决这个问题。我相信这很简单。

Answer 1

序言

这听起来像是我的作业。但是，我发现最好的学习方式就是例子 所以这是我，以身作则，好吗？

你没有给我太多的帮助，所以为了这个例子，我假设你有一个复选框或单选按钮列表Menu 1 ... {{1} }。选中的每个复选框都将添加到小计中，然后计算税额 使用单选按钮这样做有点容易，所以我也添加了这个例子。

在帖子的底部是未来研究本例中使用的内容的参考。 如果您有任何其他问题，请在本文底部的评论区域询问。

---

Javascript（复选框）| JSFiddle example (see it in action)

Menu n

---

Javascript（单选按钮）| JSFiddle example (see it in action)

//Set the tax and base cost
var f_tax = 0.07,
    i_menu_base = 5;

//Declare all the variables that will be used
var e_menu = document.getElementById("menu"),
    e_checkboxes = e_menu.getElementsByTagName("input"),
    e_subtotal = document.getElementById("sub_total");

// Add event listeners for when any checkbox changes value
for(var i = 0; i < e_checkboxes.length; i++){
    e_checkboxes[i].onchange = function(){
        //Recalculate subtotal
        get_subtotal();
    }
}

//get_subtotal calculates the subtotal based on which checkboxes are checked
function get_subtotal(){
    var f_sub_total = 0.0,
        f_grand_total = 0.0;

    var subtotal, tax, grandtotal;

    for(var i = 1; i <= e_checkboxes.length; i++){
        //If the checkbox is checked, add it to the total
        if(e_checkboxes[i-1].checked){
            f_sub_total += i * i_menu_base;
        }
    }

    //Calculate the grand total
    f_grand_total = f_sub_total*(1+f_tax);

    //Format them
    subtotal = (Math.round(f_sub_total*100)/100).toFixed(2);
    tax = (Math.round(f_tax*10000)/100).toFixed(2);
    grandtotal = (Math.round(f_grand_total*100)/100).toFixed(2);

    //Add them to the display element
    e_subtotal.innerHTML = "Subtotal: "+subtotal+"<br />";
    e_subtotal.innerHTML += "Tax: "+tax+"%<br />";
    e_subtotal.innerHTML += "Total: "+grandtotal;
}

---

未来研究的参考文献

按顺序出现

• getElementById()
• getElementsByTagName()
• looping through an array
• onchange
• Math.round()，decimal trick和toFixed()
• innerHTML

Answer 2

尽管你有任何额外的意见，而且我的判断力更强，但我感到很无聊，所以我做到了。

HTML：

<form id="menu4strombolis">input1
    <input type="radio" name="menu1" value="5">
    <br>input2
    <input type="radio" name="menu2" value="10">
    <br>input3
    <input type="radio" name="menu3" value="15">
    <br>input4
    <input type="radio" name="menu4" value="20">
    <br>input5
    <input type="radio" name="menu5" value="25">
    <br>input6
    <input type="radio" name="menu6" value="30">
    <br>input7
    <input type="radio" name="menu7" value="35">
    <br>
</form>
<button id="getTotal">Total</button>
<div id="subtotal">Sub-Total:</div>
<div id="tax">Tax:</div>
<div id="total">Total:</div>

JS：

var button = document.getElementById("getTotal");

button.onclick = function () {
    var subtotalField = document.getElementById("subtotal");
    var radios = document.forms["menu4strombolis"].getElementsByTagName("input");
    var subtotal = 0;
    var tax = 0;
    var total = 0;

    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
            subtotal += parseInt(radios[i].value);
        }
    }

    tax = (subtotal * .07).toFixed(2); ;
    total = subtotal + tax;

    document.getElementById("subtotal").innerHTML = "Sub-Total: $" + subtotal;
    document.getElementById("tax").innerHTML = "Tax: $" + tax;
    document.getElementById("total").innerHTML = "Total: $" + total;
};

和工作小提琴：

http://jsfiddle.net/RGvTt/1/

虽然在旁注中，您应该将一些无线电组合在同一组中......或者将它们设为复选框。

更新以修复OP无法修复的错误：

http://jsfiddle.net/RGvTt/4/

需要使用parseFloat。

iPhone手风琴编程FTW！

Answer 3

你想要的是element.innerHTML

所以它看起来像这样：

<form id="menu4strombolis">
    input1 <input type="radio" name="menu1"><br />
    input2 <input type="radio" name="menu2"><br />
    input3 <input type="radio" name="menu3"><br />
    input4 <input type="radio" name="menu4"><br />
    input5 <input type="radio" name="menu5"><br />
    input6 <input type="radio" name="menu6"><br />
    input7 <input type="radio" name="menu7"><br />
</form>

 ..... ..html stuff here

 Subtotal: <span id="subtotal"></span><br/>
 Tax: <span id="tax"></span><br/>
 Total: <span id="total"></span><br/>
 ETC...

 <script>
      var subtotal = //whatever menu item is checked then .value();
      var span_subtotal = document.getElementById("subtotal);
      var tax = document.getElementById("tax");
      var total = document.getElementById("total");
      var the_tax = subtotal * .07;

      span_subtotal.innerHTML = subtotal;
      tax.innerHTML = the_tax;
      total.innerHTML = subtotal + the_tax;
 <script>