程序员社区

【DOM】全选商品列表示例

在这里插入图片描述

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>

    <script type="text/javascript">
        function getSum() {
            //获取所有复选框,判断checked状态
            var sum = 0;
            var itemNodes = document.getElementsByName("item");
            //遍历集合
            for(var i=0;i<itemNodes.length;i++){
                //判断checked状态
                if(itemNodes[i].checked){
                    //因为4000是个字符串,所以需要转换为整数
                    sum = sum + parseInt(itemNodes[i].value);
                }
            }
           document.getElementById("spanid").innerHTML=sum;
        }
        //全选
        function checkAll(node) {
            //将全选的checked状态赋值给每个checkbox的checked状态
            var itemNodes = document.getElementsByName("item");
            for(var i=0;i<itemNodes.length;i++){
                itemNodes[i].checked = node.checked;
            }
        }
    </script>
</head>
<body>
<!--this代表当前节点-->
<input type="checkbox" name="allitem" onclick="checkAll(this);">全选
<br>
<input type="checkbox" name="item" value="4000">笔记本电脑 4000元
<br>
<input type="checkbox" name="item" value="4000">笔记本电脑 4000元
<br>
<input type="checkbox" name="item" value="4000">笔记本电脑 4000元
<br>
<input type="checkbox" name="item" value="4000">笔记本电脑 4000元
<br>
<input type="checkbox" name="item" value="4000">笔记本电脑 4000元
<br>
<input type="button" value="总金额是" onclick="getSum()">
<!--定义一个区域,存放总金额,,使用sapn不换行-->
<span id="spanid"></span>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

赞(0) 打赏
未经允许不得转载:IDEA激活码 » 【DOM】全选商品列表示例

相关推荐

  • 暂无文章

一个分享Java & Python知识的社区