首先這是官網(wǎng)的用法：
代碼非常的長(zhǎng)，而且很難復(fù)用（不能多個(gè)復(fù)選框共用這個(gè)checkboxChange方法）

<checkbox-group bindchange="checkboxChange">
	 <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
	    <view class="weui-cell__hd">
	      <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
	    </view>
	    <view class="weui-cell__bd">{{item.name}}</view>
	  </label>
</checkbox-group>

Page({
  onShareAppMessage() {
    return {
      title: 'checkbox',
      path: 'page/component/pages/checkbox/checkbox'
    }
  },

  data: {
    items: [
      {value: 'USA', name: '美國(guó)'},
      {value: 'CHN', name: '中國(guó)', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英國(guó)'},
      {value: 'FRA', name: '法國(guó)'}
    ]
  },

  checkboxChange(e) {
    console.log('checkbox發(fā)生change事件，攜帶value值為：', e.detail.value)

    const items = this.data.items
    const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (items[i].value === values[j]) {
          items[i].checked = true
          break
        }
      }
    }

    this.setData({
      items
    })
  }
})

劃分線，下面是更好的寫法

觸發(fā)checkboxChange的時(shí)候傳一個(gè)key值過(guò)去，之后值對(duì)應(yīng)的是一個(gè)新數(shù)組（與下面wx:for的數(shù)組不同），用來(lái)存放已選擇的項(xiàng)

<wxs module="v1">
	var  include = function(array,value) {
	    var has = false;
	    for (var i = 0; i < array.length; ++i) {
	        if (array[i] == value){
	            has = true;
	            return has
	        }
	    }
	    return has;
	 }
  module.exports.include =  include;
</wxs>

<checkbox-group bindchange="checkboxChange" data-key="selectedArray">
  <label wx:for="{{myArray}}" wx:key="index" >
       <view>
         <checkbox value="{{item.value}}" checked="{{v1.include(selectedArray,item.value)}}"/>
       </view>
       <view>{{item.name}}</view>
     </label>
 </checkbox-group>

因?yàn)?微信小程序中我們不能直接在wxml模板中使用includes方法（真是夠落后的），所以只能用<wxs>自己定義一個(gè)，然后checked這樣寫，如果checked="{{item.checked}}"的話，選中狀態(tài)的頁(yè)面效果將不會(huì)存儲(chǔ)起來(lái).

為什么不用

var  include = function(array,value) {
    return array.indexOf(value) > -1
 }

來(lái)實(shí)現(xiàn)include效果，因?yàn)閭髦档臅r(shí)候默認(rèn)會(huì)把數(shù)字轉(zhuǎn)成字符串傳過(guò)去，[“1”,“2”].indexOf(2)就等于-1了，用上面的方法就避免了這個(gè)情況

data:{
	myArray:[
      {value: 'v1', name: '菠蘿'},
      {value: 'v2', name: '叉燒'},
    ],
    selectedArray: [],
},
checkboxChange(e) {
   let { key } = e.currentTarget.dataset;
   this.setData({
     [key]: e.detail.value
   })
 }

這里checkboxChange的意思就是把選中的值賦給我們傳進(jìn)來(lái)的參數(shù)（數(shù)組）
非常簡(jiǎn)潔，最重要的是，不管我們寫了多少組checkbox-group，都能直接復(fù)用這個(gè)方法文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-505009.html

到了這里，關(guān)于微信小程序checkbox，checkbox-group多選框的簡(jiǎn)易用法，代碼簡(jiǎn)潔，可復(fù)用性高的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！