单击复选框时计算总数

Posted 2023-05-08

【中文标题】单击复选框时计算总数

【英文标题】：Calculating totals when clicking checkboxes

【发布时间】：2013-02-22 16:41:02

【问题描述】：

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

<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，整个页面都会被覆盖。请在这个问题上帮助我。我相信这真的很简单。

【问题讨论】：

这是作业吗？在此处发布您所做的任何代码，或者被否决。

无论何时选择按钮？您确定要使用无线电输入吗？

正如 Samuel Liew 提到的，请发布您编写的 JavaScript 代码以获得进一步的帮助。

【参考方案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

【参考方案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！

【讨论】：

大声笑，几乎完全相同的答案，但你的更完整。在这种情况下，我不确定这是好事还是坏事：P +1 虽然为了完整性。

@ryan :) 谢谢！我注意到在我发布我的并且页面刷新了你的答案之后！当我演奏小提琴时，经常发生在我身上:)

这不起作用，因为总数是错误的。我点击了第一个单选按钮，它显示总共 50 美元。应该是 5 倍的税。

@user2070221 现在可以了！猜猜它要求自己做一点编程太多了。如果您是计算机科学专业的学生，​​您可能想切换到 IT 网络或其他更简单的...

【参考方案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>