实现一个js的购物车功能

最新推荐文章于 2024-07-12 16:27:40 发布

murmanskkk

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量380

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41460722/article/details/109775081

版权

实现全选反选功能
输入商品价格点击底部按钮能显示总价格
（舍友的小作业）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
   *{
     margin: 0;
     padding: 0;
   }
   .wrap{
     width: 300px;
     margin: 100px auto;
   }
   table{
     border-collapse: collapse;
     border-spacing: 0;
     border: 1px solid #c0c0c0;
     width: 500px;
   }
   th,
   td{
     border: 1px solid #d0d0d0;
     color: #404060;
     padding: 10px;
   }
   th{
     background-color: #09c;
     font: bold 16px "微软雅黑";
     color: #fff;
   }
   td{
     font: 14px "微软雅黑";
   }
   tbody tr{
     background-color: #f0f0f0;
   }
   tbody tr:hover{
     cursor: pointer;
     background-color: #fafafa;
   }
 </style>
</head>
<body>
<div class="wrap">
 <table>
   <thead>
   <tr>
     <th>
       <input type="checkbox" id="j_cbAll" />全选
     </th>
     <th>商品</th>
     <th>描述</th>
     <th>价钱</th>
   </tr>
   </thead>
   <tbody id="j_tb">
   <tr>
     <td>
       <input type="checkbox" name="car_goods" class="checked"/>
     </td>
     <td>iPhone8</td>
     <td>111</td>
     <td>
       <input type="text" name="goods" value="150">元
     </td>
   </tr>
   <tr>
     <td>
       <input type="checkbox" name="car_goods" class="checked"/>
     </td>
     <td>iPad Pro</td>
     <td>111</td>
     <td> <input type="text" name="goods" value="200">元</td>
   </tr>
   <tr>
     <td>
       <input type="checkbox" name="car_goods" class="checked"/>
     </td>
     <td>iPad Air</td>
     <td>111</td>
     <td> <input type="text" name="goods" value="300">元</td>
   </tr>
   </tbody>
   <tr>
     <th colspan="4"><button id="calculate">总价格</button><input type="text" id="price">元</th>
   </tr>
 </table>
</div>

<script>


 window.onload=function(){
   <!--获取元素-->
   var j_cbAll=document.getElementById('j_cbAll')
   var j_tbs=document.getElementsByClassName('checked')

   //全选按钮的实现
   j_cbAll.onclick=function (){
     for(var i=0;i<j_tbs.length;i++){
       j_tbs[i].checked=this.checked
     }
   }
   //商品都选中时全选按钮自动选中
   for(var i=0;i<j_tbs.length;i++){
     j_tbs[i].onclick=function () {
       var flag=true
       for(var i=0;i<j_tbs.length;i++){
         if(!j_tbs[i].checked){
           flag=false;
           break;
         }
       }
       j_cbAll.checked=flag
     }
   }
   //获取按钮对象，绑定事件。
   var calculate=document.getElementById("calculate");
   //获取多选框对象数组
   var productList=document.getElementsByName("car_goods");
   //获取价格
   var goods=document.getElementsByName('goods')
   //获取input对象，为了放置计算的总额
   var myinput=document.getElementById("price");

   calculate.onclick=function(){
     var sum=0;
     for(var i=0;i<productList.length;i++){
       //计算勾选的产品
       if(productList[i].checked==true){
         //value属性值为String 所以要进行转换
         // console.log(goods[i].value);
         sum += parseInt(goods[i].value);
       }
     }
     //将总额放进input区域
     myinput.value=sum;
   }
 }

</script>
</body>
</html>

murmanskkk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现一个js的购物车功能

实现全选反选功能输入商品价格点击底部按钮能显示总价格（舍友的小作业）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .wrap{ width: 300px; ma.
复制链接

扫一扫