javascript 前端模块化开发_购物车的复选

前端开发javascript|js开发前端

购物车的全选，全不选，局部全选，全选判定

html 代码

<!Doctype html>

<html>

<head>

<metacharset=”utf-8″>

<metaname=”format-detection” content=”telephone=no” />

<metaname=”viewport” content=”user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0″ />

<title>javascript 前端模块化开发</title>

<style>

@charset “utf-8”;

html,

body,

div,

form,

label,

ul,

li,

dl,

dt,

dd,

ol,

img,

button,

em,

strong,

small,

h1,

h2,

h3,

h4,

h5,

h6{

margin:0;

padding:0;

border:0;

list-style:none;

font-style:normal;

}

body{

font-family: SimHei,’Helvetica Neue’,Arial,’Droid Sans’,sans-serif;

font-size:14px;

color:#333;

background:#f2f2f2;

}

a.link{

color:#666;

text-decoration:none;

font-weight:500;

}

a.link:hover{

color:#666;

}

h1,

h2,

h3,

h4,

h5,

h6{

font-weight:normal;

}

/*头部开始*/

.header{

position:relative;

width:100%;

height:44px;

background:#fff;

border-bottom:1pxsolid#e0e0e0;

}

.headerh1{

font-size:16px;

color:#333;

height:44px;

line-height:44px;

display:block;

text-align:center;

}

.headera{

position:absolute;

top:0;

display:block;

height:44px;

line-height:44px;

}

.headera.back{

left:0px;

}

.headera.backspan{

display:inline-block;

width:25px;

height:25px;

margin:10px5px;

background:url(“../images/icon/icon-back.png”)no-repeat;

background-size:100%;

}

.header.home{}

/*头部结束*/

/*input[type=”checkbox”]{-webkit-appearance:none;outline: none;}*/

input.check{

background:url(../images/icon/icon_radio3.png)no-repeatcenterleft;

background-size:20px20px;

position:absolute;

top:50%;

left:10px;

margin-top:-18px;

width:20px;

height:35px;

}

input.check:checked{

background:url(../images/icon/icon_radio4.png)no-repeatcenterleft;

background-size:20px20px;

}

input.goodsCheck:checked{

background:url(../images/icon/icon_radio4.png)no-repeatcenterleft;

background-size:20px20px;

}

input.check:checked{

background:url(../images/icon/icon_radio4.png)no-repeatcenterleft;

background-size:20px20px;

}

.checked{

background:url(../images/icon/icon_radio4.png)no-repeatleftcenter;

background-size:20px20px;

position:absolute;

top:50%;

left:15px;

margin-top:-18px;

width:20px;

height:35px;

}

@charset “utf-8”;

/* css Document */

/*购物车*/

.shopping{

clear:both;

overflow:hidden;

height:auto;

padding-bottom:60px;

}

.shop-group-item{

margin-bottom:5px;

}

.shop-group-itemulli{

border-bottom:1pxsolid#fff;

}

.shop-group-itemulli:last-child{

border-bottom:none;

}

.shop-name{

background:#fff;

height:35px;

line-height:35px;

padding:015px;

position:relative;

}

.shop-nameh4{

float:left;

font-size:14px;

background:url(../images/icon/icon-kin.png)no-repeatleftcenter;

background-size:20px20px;

padding-left:25px;

margin-left:28px;

}

.shop-name.coupons{

float:right;

}

.shop-name.couponsspan{

display:inline-block;

padding:05px;

}

.shop-name.couponsem{

color:#e0e0e0;

}

.shop-info{

background:#f5f5f5;

height:120px;

padding:015px;

position:relative;

}

.shop-info.checkbox{

background:url(../images/icon/icon_radio3.png)no-repeatleftcenter;

background-size:20px20px;

position:absolute;

top:50%;

left:15px;

margin-top:-60px;

width:20px;

height:120px;

}

.shop-info.checkbox1{

background:url(../images/icon/icon_radio4.png)no-repeatleftcenter;

background-size:20px20px;

position:absolute;

top:50%;

left:15px;

margin-top:-60px;

width:20px;

height:120px;

}

.shop-info.shop-info-img{

position:absolute;

top:15px;

left:45px;

width:90px;

height:90px;

}

.shop-info.shop-info-imgimg{

width:100%;

height:100%;

}

.shop-info.shop-info-text{

margin-left:130px;

padding:15px0;

}

.shop-info.shop-info-texth4{

font-size:14px;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

overflow:hidden;

}

.shop-info.shop-info-text.shop-brief{

height:25px;

line-height:25px;

font-size:12px;

color:#81838e;

white-space:nowrap;

}

.shop-info.shop-info-text.shop-briefspan{

display:inline-block;

margin-right:8px;

}

.shop-info.shop-info-text.shop-price{

height:24px;

line-height:24px;

position:relative;

}

.shop-info.shop-info-text.shop-price.shop-pices{

color:red;

font-size:16px;

}

.shop-info.shop-info-text.shop-arithmetic{

position:absolute;

right:0px;

top:0;

width:84px;

box-sizing:border-box;

white-space:nowrap;

height:100%;

border:1pxsolid#e0e0e0;

}

.shop-info.shop-info-text.shop-arithmetica{

display:inline-block;

width:23px;

height:22px;

line-height:22px;

text-align:center;

background:#fff;

font-size:16px;

}

.shop-info.shop-info-text.shop-arithmetic.minus{

border-right:1pxsolid#e0e0e0;

}

.shop-info.shop-info-text.shop-arithmetic.failed{

color:#d1d1d1;

}

.shop-info.shop-info-text.shop-arithmetic.plus{

border-left:1pxsolid#e0e0e0;

}

.shop-info.shop-info-text.shop-arithmetic.num{

width:32px;

text-align:center;

border:none;

display:inline-block;

height:100%;

box-sizing:border-box;

vertical-align:top;

margin:0-6px;

}

.shopPrice{

background:#fff;

height:35px;

line-height:35px;

padding:015px;

text-align:right;

}

.shopPricespan{

color:#f00;

}

.payment-bar{

clear:both;

overflow:hidden;

width:100%;

height:49px;

position:fixed;

bottom:0;

border-top:1pxsolid#e0e0e0;

background:#fff;

}

.payment-bar.all-checkbox{

float:left;

line-height:49px;

padding-left:40px;

}

.payment-bar.shop-total{

float:left;

-webkit-box-flex:1.0;

box-flex:1.0;

margin:9px20px9px35px;

}

.payment-bar.shop-totalstrong{

display:block;

font-size:16px;

}

.payment-bar.shop-totalspan{

display:block;

font-size:12px;

}

.payment-bar.settlement{

display:inline-block;

float:right;

width:100px;

height:49px;

line-height:49px;

text-align:center;

color:#fff;

font-size:16px;

background:#f23030;

}

</style>

</head>

<body>

<!–头部开始–>

<divclass=”header”>

<ahref=”#” class=”back”>

</a>

<ahref=”#” class=””></a>

</div>

<!–头部结束–>

<divclass=”shopping”>

<divclass=”shop-group-item”>

<divclass=”shop-name”>

<inputtype=”checkbox” class=”check goods-check shopCheck”>

<h4>

<ahref=”#”>苹果专卖店</a>

</h4>

<divclass=”coupons”>

</div>

<ul>

<li>

<divclass=”shop-info”>

<inputtype=”checkbox” class=”check goods-check goodsCheck”>

<divclass=”shop-info-img”>

<ahref=”#”>

<imgsrc=”http://iph.href.lu/90×90?text=孤独与狗” />

</a>

</div>

<divclass=”shop-info-text”>

<h4>Apple MacBook Pro 13.3英寸笔记本电脑银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>

<divclass=”shop-brief”>

</div>

<divclass=”shop-price”>

<divclass=”shop-pices”>￥

<bclass=”price”>100.00</b>

</div>

<divclass=”shop-arithmetic”>

<ahref=”javascript:;” class=”minus”>-</a>

<spanclass=”num”>1</span>

<ahref=”javascript:;” class=”plus”>+</a>

</div>

</li>

<li>

<divclass=”shop-info”>

<inputtype=”checkbox” class=”check goods-check goodsCheck”>

<divclass=”shop-info-img”>

<ahref=”#”>

<imgsrc=”http://iph.href.lu/90×90?text=孤独与狗” />

</a>

</div>

<divclass=”shop-info-text”>

<h4>Apple MacBook Pro 13.3英寸笔记本电脑银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>

<divclass=”shop-brief”>

</div>

<divclass=”shop-price”>

<divclass=”shop-pices”>￥

<bclass=”price”>100.00</b>

</div>

<divclass=”shop-arithmetic”>

<ahref=”javascript:;” class=”minus”>-</a>

<spanclass=”num”>1</span>

<ahref=”javascript:;” class=”plus”>+</a>

</div>

</li>

<li>

<divclass=”shop-info”>

<inputtype=”checkbox” class=”check goods-check goodsCheck”>

<divclass=”shop-info-img”>

<ahref=”#”>

<imgsrc=”http://iph.href.lu/90×90?text=孤独与狗” />

</a>

</div>

<divclass=”shop-info-text”>

<h4>Apple MacBook Pro 13.3英寸笔记本电脑银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>

<divclass=”shop-brief”>

</div>

<divclass=”shop-price”>

<divclass=”shop-pices”>￥

<bclass=”price”>100.00</b>

</div>

<divclass=”shop-arithmetic”>

<ahref=”javascript:;” class=”minus”>-</a>

<spanclass=”num”>1</span>

<ahref=”javascript:;” class=”plus”>+</a>

</div>

</li>

</ul>

<divclass=”shopPrice”>本店总计：￥

<spanclass=”shop-total-amount ShopTotal”>0.00</span>

</div>

<divclass=”shop-group-item”>

<divclass=”shop-name”>

<inputtype=”checkbox” class=”check goods-check shopCheck”>

<h4>

<ahref=”#”>苹果专卖店</a>

</h4>

<divclass=”coupons”>

<!–<span class=”shop-total-amount ShopTotal”>0</span>–>

</div>

<ul>

<li>

<divclass=”shop-info”>

<inputtype=”checkbox” class=”check goods-check goodsCheck”>

<divclass=”shop-info-img”>

<ahref=”#”>

<imgsrc=”http://iph.href.lu/90×90?text=孤独与狗” />

</a>

</div>

<divclass=”shop-info-text”>

<h4>Apple MacBook Pro 13.3英寸笔记本电脑银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>

<divclass=”shop-brief”>

</div>

<divclass=”shop-price”>

<divclass=”shop-pices”>￥

<bclass=”price”>100.00</b>

</div>

<divclass=”shop-arithmetic”>

<ahref=”javascript:;” class=”minus”>-</a>

<spanclass=”num”>1</span>

<ahref=”javascript:;” class=”plus”>+</a>

</div>

</li>

<li>

<divclass=”shop-info”>

<inputtype=”checkbox” class=”check goods-check goodsCheck”>

<divclass=”shop-info-img”>

<ahref=”#”>

<imgsrc=”http://iph.href.lu/90×90?text=孤独与狗” />

</a>

</div>

<divclass=”shop-info-text”>

<h4>Apple MacBook Pro 13.3英寸笔记本电脑银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>

<divclass=”shop-brief”>

</div>

<divclass=”shop-price”>

<divclass=”shop-pices”>￥

<bclass=”price”>100.00</b>

</div>

<divclass=”shop-arithmetic”>

<ahref=”javascript:;” class=”minus”>-</a>

<spanclass=”num”>1</span>

<ahref=”javascript:;” class=”plus”>+</a>

</div>

</li>

</ul>

<divclass=”shopPrice”>本店总计：￥

<spanclass=”shop-total-amount ShopTotal”>0.00</span>

</div>

<divclass=”payment-bar”>

<divclass=”all-checkbox”>

<inputtype=”checkbox” class=”check goods-check” id=”AllCheck”>全选</div>

<divclass=”shop-total”>

<strong>总价：

<iclass=”total” id=”AllTotal”>0.00</i>

</strong>

</div>

<ahref=”#” class=”settlement”>结算</a>

</div>

$(function(){

// 数量减

$(“.minus”).click(function(){

vart=$(this).parent().find(‘.num’);

t.text(parseInt(t.text()) -1);

if (t.text() <=1) {

t.text(1);

}

TotalPrice();

});

// 数量加

$(“.plus”).click(function(){

vart=$(this).parent().find(‘.num’);

t.text(parseInt(t.text()) +1);

if (t.text() <=1) {

t.text(1);

}

TotalPrice();

});

/******————分割线—————–******/

// 点击商品按钮

$(“.goodsCheck”).click(function(){

vargoods=$(this).closest(“.shop-group-item”).find(“.goodsCheck”);//获取本店铺的所有商品

vargoodsC=$(this).closest(“.shop-group-item”).find(“.goodsCheck:checked”);//获取本店铺所有被选中的商品

varShops=$(this).closest(“.shop-group-item”).find(“.shopCheck”);//获取本店铺的全选按钮

if (goods.length ==goodsC.length) {//如果选中的商品等于所有商品

Shops.prop(‘checked’,true);//店铺全选按钮被选中

if ($(“.shopCheck”).length ==$(“.shopCheck:checked”).length) {//如果店铺被选中的数量等于所有店铺的数量

$(“#AllCheck”).prop(‘checked’,true);//全选按钮被选中

TotalPrice();

}else{

$(“#AllCheck”).prop(‘checked’,false);//else全选按钮不被选中

TotalPrice();

}

}else{//如果选中的商品不等于所有商品

Shops.prop(‘checked’,false);//店铺全选按钮不被选中

$(“#AllCheck”).prop(‘checked’,false);//全选按钮也不被选中

// 计算

TotalPrice();

// 计算

}

});

// 点击店铺按钮

$(“.shopCheck”).click(function(){

if ($(this).prop(“checked”) ==true) {//如果店铺按钮被选中

$(this).parents(“.shop-group-item”).find(“.goods-check”).prop(‘checked’,true);//店铺内的所有商品按钮也被选中

if ($(“.shopCheck”).length ==$(“.shopCheck:checked”).length) {//如果店铺被选中的数量等于所有店铺的数量

$(“#AllCheck”).prop(‘checked’,true);//全选按钮被选中

TotalPrice();

}else{

$(“#AllCheck”).prop(‘checked’,false);//else全选按钮不被选中

TotalPrice();

}

}else{//如果店铺按钮不被选中

$(this).parents(“.shop-group-item”).find(“.goods-check”).prop(‘checked’,false);//店铺内的所有商品也不被全选

$(“#AllCheck”).prop(‘checked’,false);//全选按钮也不被选中

TotalPrice();

}

});

// 点击全选按钮

$(“#AllCheck”).click(function(){

if ($(this).prop(“checked”) ==true) {//如果全选按钮被选中

$(“.goods-check”).prop(‘checked’,true);//所有按钮都被选中

TotalPrice();

}else{

$(“.goods-check”).prop(‘checked’,false);//else所有按钮不全选

TotalPrice();

}

$(“.shopCheck”).change();//执行店铺全选的操作

});

//计算

functionTotalPrice(){

varallprice=0;//总价

$(“.shop-group-item”).each(function(){//循环每个店铺

varoprice=0;//店铺总价

$(this).find(“.goodsCheck”).each(function(){//循环店铺里面的商品

if ($(this).is(“:checked”)) {//如果该商品被选中

varnum=parseInt($(this).parents(“.shop-info”).find(“.num”).text());//得到商品的数量

varprice=parseFloat($(this).parents(“.shop-info”).find(“.price”)

.text());//得到商品的单价

vartotal=price*num;//计算单个商品的总价

oprice+=total;//计算该店铺的总价

}

$(this).closest(“.shop-group-item”).find(“.ShopTotal”).text(oprice.toFixed(

2));//显示被选中商品的店铺总价

});

varoneprice=parseFloat($(this).find(“.ShopTotal”).text());//得到每个店铺的总价

allprice+=oneprice;//计算所有店铺的总价

});

$(“#AllTotal”).text(allprice.toFixed(2));//输出全部总价

}

});

</script>

</body>

</html>

前端开发流行的js|web前端开发|网站前端开发

https://www.rokub.com

javascript 前端模块化开发_购物车的复选

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发