单击复选框时计算总数

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>

Whenever a button is selected I need the subtotal and total to be updated.

这就是我想要的样子。

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

税收总是 %7 或 .7

菜单 1 到 7 的价格每增加 5 美元。 Menu1 是 5 美元，menu2 是 10 美元，以此类推。

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

Answer 1

序言

这对我来说听起来像是家庭作业。但是，我发现最好的学习方式是通过例子。
所以这里是我，以身作则，好吗？

你没有给我太多继续，所以为了这个例子，我假设你有一个复选框或单选按钮列表，上面写着Menu 1...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;
}

---

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

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

//Declare all the variables that will be used
var e_menu = document.getElementById("menu"),
    e_radios = 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_radios.length; i++){
    e_radios[i].onchange = function(){
        //Recalculate subtotal
        get_subtotal(this);
    }
}

//get_index gets the index of the element (1..n)
function get_index(element){
    for(var i = 1; i <= e_radios.length; i++){
        if(e_radios[i-1] == element){
            return i;
        }
    }
}

//get_subtotal calculates the subtotal based on the radio that was changed
function get_subtotal(el){
    var f_sub_total = 0.0,
        f_grand_total = 0.0;

    var subtotal, tax, grandtotal;

    f_sub_total += get_index(el) * 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 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>