javascript checkbox复选框(商品列表统计金额)

发布时间:2020-12-17编辑:脚本学堂
本文介绍了javascript操作checkbox复选框的方法,有关js实现商品列表金额统计的例子,有需要的朋友参考下。

例子,javascript checkbox复选框操作实例。
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>商品列表统计金额--www.jb200.com</title>
    <style type="text/css">
            body,div,p
            {
                margin:0;
                padding:0;
                font-size:14px;
            }
            #sumMoney
            {
                font-size:26px;
                font-weight:bold;
                color:Red;
            }
    </style>
    <script type="text/javascript">
        //全选和全清
        function checkAll() {
            var chkItems = document.getElementsByName("item");
            for (var i = 0; i < chkItems.length; i++) {
                chkItems[i].checked = event.srcElement.checked;
            }
            calculateMoney();
        }
        //统计所有选中的产品金额
        function calculateMoney() {
            var sum = 0;
            var chkItems = document.getElementsByName("item");
            for (var i = 0; i < chkItems.length; i++) {
                if (chkItems[i].checked) {
                    sum += parseInt(chkItems[i].value);
                }
            }
            var sumMoneyObj = document.getElementById("sumMoney");
            sumMoneyObj.innerHTML = "总金额:" + sum;
        }
        // (脚本学堂 www.jb200.com)
        //给每个产品复选框加上自动统计功能
        function iniEvent() {
            var chkItems = document.getElementsByName("item");
            for (var i = 0; i < chkItems.length; i++) {
                chkItems[i].onclick = calculateMoney;
            }           
        }
    </script>
</head>
<body onload="iniEvent()">
    <div id="divMain">
        <p><input type="checkbox" name="全选" onclick="checkAll()" />全选</p>
        <p><input type="checkbox" name="item" value="2999" />¥2999 Haier/海尔 KFR-35GW/03GJC12-DS</p>
        <p><input type="checkbox" name="item" value="2256" />¥2256 天猫年货 AUX/奥克斯 KFR-35GW/SFA+2</p>
        <p><input type="checkbox" name="item" value="2799" />¥2799 Gree/格力 KFR-26G(26556)FNDe-3</p>
        <p><input type="checkbox" name="item" value="2008" />¥2008 AUX/奥克斯 KFR-25GW/SFA+2</p>
        <p><input type="checkbox" name="item" value="2598" />¥2598 Hisense/海信 KFR-35GW/EF11S3</p>
        <p><input type="checkbox" name="item" value="1877" />¥1877 TCL KFRd-25GW/DE22</p>
        <p><input type="checkbox" name="item" value="2398" />¥2398 Kelon/科龙 KFR-35GW/EFVCS3</p>
        <p><input type="checkbox" name="item" value="1999" />¥1999 TCL KFRd-35GW/FC23</p>
        <p><input type="checkbox" name="全选" onclick="checkAll()" />全选</p>
        <p><span id="sumMoney">总金额:</span></p>
    </div>
</body>
</html>