爱站程序员基地效果如下图所示
全选功能模块链接
代码
<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title></title></head><script src=\"Jq.js\"></script><script type=\"text/javascript\">$(function(){$(\'#id_1 ul :first-child\').siblings(\'li\').hide();$(\'#id_1 ul :first-child\').siblings(\'li\').css(\'border-bottom\',\'1px solid black\');$(\'#id_1 ul\').mousedown(function(){$(this).children(\'li\').show();});$(\'#id_1 ul\').mouseleave(function(){$(this).children(\'li\').eq(0).siblings(\'li\').hide();});$(\'#checkall\').change(function(){/*全选按钮控制下面的按钮*/$(\'.cargo\').find(\'input\').prop(\'checked\',$(this).prop(\'checked\'));})$(\'.cargo\').find(\'input\').change(function(){/*下面的按钮控制全选按钮*///console.log($(\'.cargo input:checked\').length);/*先刷新一下 总计*/if($(\'.cargo input:checked\').length==3){$(\'#checkall\').prop(\'checked\',true);}else{$(\'#checkall\').prop(\'checked\',false);}})$(\'.delete\').click(function(){/*删除键 */$(this).parent().parent().find(\'input\').prop(\'value\',0);$(this).parent().parent().hide();var money=parseFloat($(this).parent().parent().find(\'.univalence\').html());var num=parseInt($(this).parent().parent().find(\'input\').prop(\'value\'));money=money*num;$(this).parent().parent().find(\'.subtotal\').text(money.toFixed(2));var total_money=0;for(var i=0 ;i<$(\'.cargo\').find(\'.subtotal\').length;i++){total_money+=parseFloat($(\'.cargo\').find(\'.subtotal\').eq(i).text());// console.log(parseFloat($(\'.cargo\').find(\'.subtotal\').text()));}$(\'#total\').text(total_money.toFixed(2));});var total_money=0;for(var i=0 ;i<$(\'.cargo\').find(\'.subtotal\').length;i++){total_money+=parseFloat($(\'.cargo\').find(\'.subtotal\').eq(i).text());// console.log(parseFloat($(\'.cargo\').find(\'.subtotal\').text()));}$(\'#total\').text(total_money.toFixed(2));$(\'.cargo button\').click(function(){//var old_money=parseInt($(this).siblings(\'input\').prop(\'value\'))*parseFloat($(this).parent().parent().find(\'.univalence\').html());if($(this).index()===0){//减法var t =parseInt($(this).siblings(\'input\').prop(\'value\'))-1;if(t>=0)$(this).siblings(\'input\').prop(\'value\',t);}if($(this).index()===2){//加法var t =parseInt($(this).siblings(\'input\').prop(\'value\'))+1;$(this).siblings(\'input\').prop(\'value\',t);}var money=parseFloat($(this).parent().parent().find(\'.univalence\').html());var num=parseInt($(this).siblings(\'input\').prop(\'value\'));money=money*num;$(this).parent().parent().find(\'.subtotal\').text(money.toFixed(2));var total_money=0;for(var i=0 ;i<$(\'.cargo\').find(\'.subtotal\').length;i++){total_money+=parseFloat($(\'.cargo\').find(\'.subtotal\').eq(i).text());// console.log(parseFloat($(\'.cargo\').find(\'.subtotal\').text()));}$(\'#total\').text(total_money.toFixed(2));});})</script><style type=\"text/css\">*{font-size:small;}a{text-decoration: none;color: black;}#id_1{/**/display: block;overflow:visible;height:20px;width :100%;background-color:gainsboro;}#id_1:first-child{padding-left: 40px;}#id_1 #red{color: red;}#id_1 #span_three{padding-left:220px;}#id_1 ul{list-style: none;display:block;float:left;padding: 0;margin:0;}#id_1 ul li{text-align:center;}#id_1 img{padding-left: 40px;position:absolute;left:0;top:30px;}#h4_0{color: red;text-decoration: underline;}#id_2{padding-left: 40px;width: 80%;position:absolute;left:0;top:120px;height:20px;}#id_2 #headline{width: 1000px;background-color:gainsboro;}#id_2 #headline{padding-left: 20px;}.cargo{width: 1000px;height:120px;position:relative;left:17px;top:30px;border-top:1px solid black;}.cargo:hover{background-color: beige;}.cargo img{float:left;padding-left: 70px;width: 80px;height:80px;}</style><body><div id=\'id_1\'><!--标题栏--><span style=\"float: left;\">最优购欢迎您|请登录</span><a id=\'red\' href=\"#\" style=\"float: left;\">免费注册</a><a id=\'span_three\' href=\"#\" style=\"float: left;\">我的订单 |</a><!--下拉栏--><ul><li><a href=\"#\"> 我的品优购 ￬ |</a> </li><li>收藏</li><li>浏览</li><li>购买</li></ul><a href=\"#\" style=\"float: left;\">品优购会员 |</a><a href=\"#\" style=\"float: left;\">企业采购 |</a><ul><li><a href=\"#\" style=\"float: left;\">关注品优购 ￬ |</a></li><li>公众号</li><li>收藏官网</li></ul><a href=\"#\" style=\"float: left;\">品优购会员 ￬ |</a><a href=\"#\" style=\"float: left;\">客户服务 ￬ |</a><a href=\"#\" style=\"float: left;\">网站导航 ￬ |</a><img src=\"pinyougou.png\" alt=\"\" /></div><!-- 品优购图片--><div id=\'id_2\'><!--商品标题栏 --><h4 id=\"h4_0\">全部商品</h4><div id=\'headline\'><input type=\"checkbox\" name=\"checkall\" id=\"checkall\" value=\"\" /><span style=\"padding-left: 100px;\">商品</span><span style=\"padding-left: 400px;\">单价</span><span style=\"padding-left: 80px;\">数量</span><span style=\"padding-left: 80px;\">小计</span><span style=\"padding-left: 80px;\">操作</span></div><div class=\'cargo\' ><!--商品栏--><input type=\"checkbox\" style=\"float: left; padding-top:50px;\" /><img src=\"img/img_cargo.png\" alt=\"\" style=\"float: left;padding-top:15px;\"/><div style=\"float: left; width:140px ;padding-left:20px;padding-top:15px;\">志高（CHIGO）电水壶烧水壶电热水壶 304不锈钢双层防烫 1.8L容量 ZD18A-708G8 紫色</div><div class=\"univalence\" style=\"float: left; padding-left:220px ;text-align:center; padding-top:30px\">188.9</div><div class=\"amount\" style=\"padding-top:30px; padding-left:70px;float: left;\"><!--数量框--><button style=\"float: left;width: 20px;height: 20px;margin: 0;\">-</button><input class=\'num_input\' type=\'number\' name=\"\" id=\"\" value=1 style=\"float: left;height: 15px;width:40px\"/><button style=\"float: left;width: 20px;height: 20px;margin: 0;\">+</button></div><div class=\'subtotal\'style=\"float: left; padding-left:50px ;text-align:center; padding-top:30px\">188.9</div><div style=\"float: left; padding-left:80px ;text-align:center; padding-top:30px\"><a href=\"#\" class=\'delete\'>删除</a></div></div><div class=\'cargo\'><!--商品栏 --><input type=\"checkbox\" style=\"float: left; padding-top:50px;\" /><img src=\"img/img_2.png\" alt=\"\" style=\"float: left;padding-top:15px;\"/><div style=\"float: left; width:140px ;padding-left:20px;padding-top:15px;\">伊利 安慕希希腊风味常温酸奶原味205g*16盒/箱（礼盒装</div><div class=\"univalence\" style=\"float: left; padding-left:220px ;text-align:center; padding-top:30px\">69.9</div><div class=\"amount\" style=\"padding-top:30px; padding-left:75px;float: left;\"><!--数量框--><button style=\"float: left;width: 20px;height: 20px;margin: 0;\">-</button><input class=\'num_input\' type=\'number\' name=\"\" id=\"\" value=1 style=\"float: left;height: 15px;width:40px\"/><button style=\"float: left;width: 20px;height: 20px;margin: 0;\">+</button></div><div class=\'subtotal\'style=\"float: left; padding-left:50px ;text-align:center; padding-top:30px\">69.9</div><div style=\"float: left; padding-left:80px ;text-align:center; padding-top:30px\"><a href=\"#\" class=\'delete\'>删除</a></div></div><div class=\'cargo\'><!--商品栏 --><input type=\"checkbox\" style=\"float: left; padding-top:50px;\" /><img src=\"img/img_3.png\" alt=\"\" style=\"float: left;padding-top:15px;\"/><div style=\"float: left; width:140px ;padding-left:20px;padding-top:15px;\">零基础学HTML5+CSS3（全彩版）</div><div class=\"univalence\" style=\"float: left; padding-left:220px ;text-align:center; padding-top:30px\">32.2</div><div class=\"amount\" style=\"padding-top:30px; padding-left:75px;float: left;\"><!--数量框--><button style=\"float: left;width: 20px;height: 20px;margin: 0;\">-</button><input class=\'num_input\' type=\'number\' name=\"\" id=\"\" value=1 style=\"float: left;height: 15px;width:40px\"/><button style=\"float: left;width: 20px;height: 20px;margin: 0;\">+</button></div><div class=\'subtotal\'style=\"float: left; padding-left:50px ;text-align:center; padding-top:30px\">32.2</div><div style=\"float: left; padding-left:80px ;text-align:center; padding-top:30px\"><a href=\"#\" class=\'delete\'>删除</a></div></div><div style=\"width:300px;height:100px;padding-top: 100px; padding-left:800px;\"><!--合计栏 --><span style=\"float:left\"> 合计：</span><div id=\'total\'style=\"float:left;width:50px\">1</div><a href=\"\" style=\"text-decoration: none;color: red; float:left\">支付</a></div></div></div></body></html>
