javascript小项目：购物页面的全选和金额总计功能

最新推荐文章于 2024-04-27 13:18:52 发布

IT_COOKIE_SAM

最新推荐文章于 2024-04-27 13:18:52 发布

阅读量1k

点赞数 1

分类专栏：学习心得

本文链接：https://blog.csdn.net/IT_COOKIE_SAM/article/details/54612826

版权

学习心得专栏收录该内容

16 篇文章 0 订阅

订阅专栏

首先设计一个html页面

<html>

<body>

            <input type="checkbox" name="shangping" value="1000">笔记本电脑1000元<br/>
           <input type="checkbox" name="shangping" value="2000">笔记本电脑2000元<br/>
           <input type="checkbox" name="shangping" value="6000">笔记本电脑6000元<br/>
           <input type="checkbox" name="shangping" value="8000">笔记本电脑8000元<br/>
           <input type="checkbox" name="shangping" value="600">笔记本电脑600元<br/>
           <input type="checkbox" name="shangping" value="1500">笔记本电脑1500元<br/>
           <input type="checkbox" name="all" >全选<br/>
           <input type="button" value="总金额:" ><span id="spanid"></span>

</body>

</html>

接着设计js方法：全选功能

在<head>里面写<script type="type;javascript">

//注意这里的方法名不能为all()，否则不会运行

    function aall(){
           //document是javascript的内置方法,不需要通过window.document来获取document。
               var a=document.getElementsByName("shangping");
               var b=document.getElementsByName("all")[0];
               for(var i=0;i<a.length;i++){
                   //checked方法是一个返回布尔值的方法，如果b被选中则把true值赋值给a各个数组元素
                       a[i].checked=b.checked;

               }
             }

然后在全选这边往<input>标签添加οnclick="aall()"来触发javascript的方法

完成了全选功能，我们接着做金额总计功能：