使用 javascript 选中复选框后计算总数

Question

我正在尝试为我的网站创建一个 javascript 代码，以便在选中复选框后进行计算。每次我 select 一个复选框时，它应该计算项目的总价。

这是我的 html 代码：

<form id="orderForm" action="#" method="get">
    <section id="selectBook">
        <h2>Select books</h2>
        <?php
        include_once('database_conn.php');
        $sqlBooks = 'SELECT bookISBN, bookTitle, bookYear, catDesc,  bookPrice FROM nbc_book b inner join nbc_category c on b.catID = c.catID WHERE 1 order by bookTitle';
        $rsBooks = mysqli_query($conn, $sqlBooks);
        while ($book = mysqli_fetch_assoc($rsBooks)) {
            echo "\t<div class='item'>
                    <span class='bookTitle'>{$book['bookTitle']}</span>
                    <span class='bookYear'>{$book['bookYear']}</span>
                    <span class='catDesc'>{$book['catDesc']}</span>
                    <span class='bookPrice'>{$book['bookPrice']}</span>
                    <span class='chosen'><input type='checkbox' name='book[]' value='{$book['bookISBN']}' title='{$book['bookPrice']}' /></span>
                </div>\n";
        }
        ?>
    </section>

    <section id="collection">
        <h2>Collection method</h2>
        <p>Please select whether you want your chosen book(s) to be delivered to your home address (a charge applies for this) or whether you want to collect them yourself.</p>
        <p>
        Home address - &pound;3.99 <input type="radio" name="deliveryType" value="home" title="3.99" checked = "checked" />&nbsp; | &nbsp;
        Collect from warehouse - no charge <input type="radio"  name="deliveryType" value="trade" title="0" />
        </p>
    </section>

    <section id="checkCost">
        <h2>Total cost</h2>
        Total <input type="text" name="total" id="total" size="10" readonly="readonly" />
    </section>

代码已分标签

这是我目前编写的 javascript 代码：

var item = document.getElementsByClassName("item");
    var chkbox = document.getElementsByTagName("input");

    for(var i = 0; i < chkbox.length; i++){
        chkbox[i].onchange = function(){
            //Recalculate total
            getTotal();
        }
    }

    function getTotal(){
        var total = 0.0;

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

        return total;

        document.getElementById("total").innerHTML = total;
    }

我真的需要一些专家来帮助我解决这个问题。谢谢。

Answer 1

在 getTotal() 中，您在此处设置值之前返回：

return total;
document.getElementById("total").innerHTML = total;
使用值而不是 innerHTHML 设置输入。

document.getElementById("total").setAttribute("value", total);
我不得不将检查更改为 parseFloat(chkbox[i-1].title) 以匹配 if 语句

jsFiddle

以上示例使用到产品，第一个价格为 1，第二个价格为 2。

使用 javascript 选中复选框后计算总数

Calculate total once checkbox is checked using javascript

html

javascript

checkbox

jquery