Dom-全选商品列表示范

最新推荐文章于 2020-11-06 18:07:54 发布

qq_34734520

最新推荐文章于 2020-11-06 18:07:54 发布

阅读量373

点赞数 1

分类专栏： java之DOM

本文链接：https://blog.csdn.net/qq_34734520/article/details/51592004

版权

java之DOM 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文通过WebStorm展示了一个简单的商品列表全选的实现过程，讲解了如何在web开发环境中进行操作。

摘要由CSDN通过智能技术生成

web-strom开发

1.简单商品列表的全选

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function getSum(){
            /*获取名称为item的复选框
            判断check状态，为true表示被选中
            * */
            var sum=0;
            var collItemNodes=document.getElementsByName("item");
            for(var i=0;i<collItemNodes.length;i++){
                if(collItemNodes[i].checked){
                    sum+=parseInt(collItemNodes[i].value);
                }
            }
            var sSum=sum+"元";
            document.getElementById("sid").innerHTML=sSum.fontcolor('red');
         }
        //全选
        function checkall(node){
            //将全选的box的checked状态赋值给所有的itembox的checked
            var collItemNodes=document.getElementsByName("item");
            for(var i=0;i<collItemNodes.length;i++){
                collItemNodes[i].checked=node.checked;
                }
        }
    </script>
</head>
<body>
    <input type="checkbox" name="allitem" οnclick="checkall(this)"/>全选<br/>
    <input type="checkbox" name="item" value="5000"/>笔记本电脑 4000元<br/>
    <input type="checkbox" name="item" value="5000"/>笔记本电脑 4000元<br/>
    <input type="checkbox" name="item" value="5000"/>笔记本电脑 4000元<br/>
    <input type="checkbox" name="item" value="5000"/>笔记本电脑 4000元<br/>
    <input type="checkbox" name="item" value="5000"/>笔记本电脑 4000元<br/>
    <input type="button" value="总金额是" οnclick="getSum()"/><span id="sid"></span>
</body>
</html>