单击复选框时计算总计

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... Menu n.选中的每个复选框都将添加到小计中,然后计算税额.
使用单选按钮这样做有点容易,所以我也添加了这个例子.

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

Javascript(复选框)| JSFiddle示例(参见实际操作)

//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示例(参见实际操作)

//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()
• 循环遍历数组
• onchange
• Math.round(),十进制技巧和toFixed()
• innerHTML