绑定事件$(document).on("click",'[name="a1"]',function(){}); - lucky

作者在 2016-11-16 19:56:31 发布以下内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>

/*18:20_17:50*/

   *{ margin:0px; padding:0px;}
   h4{ width:900px; border:1px solid #ccc; margin:0px auto;}
   h4 span{ padding:0px 29px 0px 29px; border-right:1px solid #ccc; margin:0px;}
   h4 .title2{ padding:0px 161px 0px 161px; border-right:1px solid #ccc;}
   h4 .title3{ padding:0px 29px 0px 29px; border-right:0px solid #ccc;}
   ul{ width:902px; overflow:hidden; list-style:none; margin:0px auto;}
   li{ border:1px solid #ccc; overflow:hidden; border-top:0px; }
   li span{ display:block; float:left; border-right:1px solid #ccc; width:99px; line-height:220px; overflow:hidden; text-align:center;}
   img{ height:220px; vertical-align:middle;}
   li .title1{ width:103px; border-right:1px solid #ccc; }
   li .title2{ width:396px;}
   li .title3{border-right:0px solid #ccc;}
   p{ width:900px; margin:0px auto;}
   p span{ float:right; margin:20px;}
   p input{ margin:20px;}


</style>
<script language="javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/jscript">
   $(function(){
       zong();//总计
       $('[value="全选"]').click(function(){//全选
           $('[value="全选1"]').attr("checked",this.checked);
       });
       $('[value="全删"]').click(function(){//全删
           $('[value="全选1"]').each(function() {
                 if($('[value="全选1"]').attr("checked")){
                   $(this).parents("li").remove();
               }
               zong();
            });
       });
       $(document).on("click",'[class="title3"]',function(){//删除一行
           if(confirm("是否要删除")){
               $(this).parents("li").remove();
           }
               zong();
       });
       $(document).on("click",'[name="sub1"]',function(){//减一件

           var $dj=parseFloat($(this).parent().prev().text());
           var $js=parseInt($(this).next().val());
           if($js<=1){
               $js=1;
           }else{
               $(this).next().val($js-1);
               $(this).parent().next().text((($js-1)*$dj).toFixed(2)+"元");
           }
               zong();
       });
       $(document).on("click",'[name="add1"]',function(){//加一件
           var $dj=parseFloat($(this).parent().prev().text());
           var $js=parseInt($(this).prev().val())+1;
           $(this).prev().val($js);
           $(this).parent().next().text(($js*$dj).toFixed(2)+"元");
           zong();
       })
       $('[value="增加一行"]').click(function(){//增加一行
           var $li1=$('<li>'
           +'<span class="title1"><input type="checkbox" value="全选1"></span>'
           +'<span class="title2"><img src="img/3.jpg"> casio/卡西欧EX-TR350</span>'
           +'<span>2583.5元</span>'
           +'<span>'
               +'<input type="button" value=" - " name="sub1"><input type="text" value="1" size="3"><input type="button" value=" + " name="add1">'
            +'</span>'
           +'<span class="xj">2583.5元</span>'
           +'<span class="title3"><a href="##">删除</a></span>'
        +'</li>');
       $("ul").append($li1);
       zong();
       })
   });
   function zong(){
       var sum=0;
       $(".xj").each(function() {
             sum+=parseFloat($(this).text());
        });
       $("b").text(sum);
   }
</script>
</head>

<body>
   <h4>
       <span class="title1"><input type="checkbox" value="全选">全选</span>
        <span class="title2">商品信息</span>
        <span>单价</span>
        <span>件数</span>
        <span>小计</span>
        <span class="title3">操作</span>
    </h4>
   <ul>
       <li>
           <span class="title1"><input type="checkbox" value="全选1"></span>
           <span class="title2"><img src="img/1.jpg"> casio/卡西欧EX-TR350</span>
           <span>3252.9元</span>
           <span>
               <input type="button" value=" - " name="sub1"><input type="text" value="9" size="3"><input type="button" value=" + " name="add1">
            </span>
           <span class="xj">29276.1元</span>
           <span class="title3"><a href="##">删除</a></span>
        </li>

       <li>
           <span class="title1"><input type="checkbox" value="全选1"></span>
           <span class="title2"><img src="img/2.jpg"> casio/卡西欧EX-TR350</span>
           <span>2583.5元</span>
           <span>
               <input type="button" value=" - " name="sub1"><input type="text" value="1" size="3"><input type="button" value=" + " name="add1">
            </span>
           <span class="xj">2583.5元</span>
           <span class="title3"><a href="##">删除</a></span>
        </li>
    </ul>
    <p><input type="button" value="增加一行"><input type="button" value="全删"><span>总计<b>31859.6</b>元</span></p>

</body>
</html>