您的位置：首页 > Web前端 > JavaScript

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

2017-01-19 10:00 253 查看

首先设计一个html页面

<html>

<head></head>

<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>标签添加onclick="aall()"来触发javascript的方法

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

function getsum(){

                   var a=document.getElementsByName("shangping");

                   var sum=0;

                   for(var i=0;i<a.length;i++){

                   //测试商品有没有被选中

                       if(a[i].checked){

                       //sum和商品价格相加的时候需要强转

                               sum+=parseInt(a[i].value);

                      }

                   }

                   //获取spanid节点再通过innerHtml将自己想输出的内容插入到页面

                   var spannode=document.getElementById("spanid");

                   spannode.innerHTML=("$"+sum).fontcolor("red");

           }



最后呈现简单的功能效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航