微信小程式，這裡實現微信小程式checkbox,有需要此功能的朋友可以參考下。

摘要: 加減商品數量，彙總價格，全選與全不選

設計思路：

一、從網路上傳入以下Json資料格式的陣列  1.標題title 2.圖片地址 3.數量num 4.價格price  5.是否選中selected 

二、點選複選框toggle操作 如已經選中的，經點選變成未選中，反之而反之 點選依據index作為標識，方便遍歷

三、全選操作 首次點選即為全部選中，再次點選為全不選，全選按鈕本身也跟隨toggle變換

四、點選結算按鈕，將已選中的陣列取出，以供通過網路提交到服務端，這裡給個toast作為結果演示。

五、利用stepper作加減運算，同樣依據index作為標識，點完寫回num值。

六、佈局，全選與結算按鈕底部對齊，購物車商城自適應高度，類似於Android的weight。

步驟：

初始資料渲染

1.1 佈局與樣式表

上方是一個商品列表，下方是一個全選按鈕與立即結算按鈕

商品列表左部為商品縮圖，右上為商品標題，右下為商品價格與數量，

先看一下效果圖：

頁面程式碼如圖:

<view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
<view class="my-wrap"> <view class="my-tlt">

<!-- 減號 -->
<text class="{{minusStatuses[index]}} bnt" data-index="{{index}}" bindtap="bindMinus">-</text>
<!-- 數值 -->
<input type="number" bindchange="bindManual" class="int" value="{{item.num}}" />
<!-- 加號 -->
<text class="normal bnt" data-index="{{index}}" bindtap="bindPlus">+</text>]

</view>
</view>
<view class="my-right">
<icon class="iconfont del"/>
<text class="gay">￥{{item.price}}</text>
</view>
</view>
</view>

<view class="float">

<!-- 全選 -->
<view bindtap="bindSelectAll" class="my-sel" >
<icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20" class="l-mycheck"/>
<icon wx:else type="circle" size="20" class="l-mycheck"/>
<text>全選</text>
</view>
<view class="my-rightbox">
<view class="my-count" data='{{sep}}'>

<!-- 統計 -->
合計（不含運費）：￥<text>{{count}}</text>
</view>
<view class="my-bnts" bindtap="setPayment" >
結算（<text>{{number}}</text>）
</view>
</view>
</view>

這裡css自己去寫,這裡不做多介紹，只做效果：

首先：先定義js

在page.data裡面

count:0,
number:0,
minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled'],
carts: [
{title:'自營商城',image:'../images/my.png',num:'1',price:'198.0',selected:false},
{title:'自營商城',image:'../images/my.png',num:'1',price:'100.0',selected:false},
{title:'自營商城',image:'../images/my.png',num:'3',price:'15.0',selected:false},
{title:'自營商城',image:'../images/my.png',num:'2',price:'15.2',selected:false},
{title:'自營商城',image:'../images/my.png',num:'1',price:'122.0',selected:true},
]，

carts這個你可以通過url自己傳參，我這裡自己寫點資料，

js程式碼bindMinus、bindPlus分別改造為如下：

bindMinus: function(e) {
var index = parseInt(e.currentTarget.dataset.index);

var num = this.data.carts[index].num;

if (num > 0) {
num --;
}
var minusStatus = num <= 0 ? 'disabled' : 'normal';
var carts = this.data.carts;
carts[index].num = num;

var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;

this.setData({
carts: carts,
minusStatuses: minusStatuses
});
},
bindPlus: function(e) {
var index = parseInt(e.currentTarget.dataset.index);
var num = this.data.carts[index].num; 
num ++;
var minusStatus = num <= 1 ? 'disabled' : 'normal';
var carts = this.data.carts;
carts[index].num = num;

var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;

this.setData({
carts: carts,
minusStatuses: minusStatuses
});
}, 

單選：這裡需要判斷一下已選狀態，一般購物車勾選狀態是記錄在網路的。index值用於傳值js，遍歷之用。

bindCheckbox: function(e) {
  var index = parseInt(e.currentTarget.dataset.index);
  var selected = this.data.carts[index].selected;
  var carts = this.data.carts;
var num = parseInt(this.data.carts[index].num); 
var price=this.data.carts[index].price; 
if(!selected){
this.setData({
count:this.data.count+ num*price,
number:num+this.data.number

});
}else{
this.setData({
count:this.data.count- num*price,
number:this.data.number-num

});
}

  carts[index].selected = !selected;
 
  this.setData({
    carts: carts
  });
},

全選與全不選事件

實現bindSelectAll事件，改變全選狀態

首先定義一個data值，以記錄全選狀態

selectedAllStatus: false

事件實現：

bindSelectAll: function() {
var selectedAllStatus = this.data.selectedAllStatus;
selectedAllStatus = !selectedAllStatus;
var carts = this.data.carts;
if(!selectedAllStatus){
for (var i = 0; i < carts.length; i++) {
carts[i].selected = selectedAllStatus;
var num = parseInt(this.data.carts[i].num); 
var price=parseInt(this.data.carts[i].price); 
this.setData({
count:this.data.count-num*price,
number:this.data.number-num

});
}
}

我這裡下面結算是底部懸浮固定,有什麼問題請多指導，