微信小程序复选框checkbox4选2（一）

处理数据

fruit:'21234'  //字符串

fruit:{  //对象，数组
	num: "2",
	display: "苹果、草莓",
	list: [
		{type: "1", selected: true, name: "苹果", val: "补脑养血、宁神安眠、健脾养心"},
		{type: "2", selected: true, name: "草莓", val: "生津止渴、润肺健脾"},
		{type: "3", selected: false, name: "葡萄", val: "生津消食、缓解疲劳、补血益气"},
		{type: "4", selected: false, name: "莲雾", val: "解热利尿、生津止渴"}
	]
}

1,wxml

<view class='white-view' style='margin:100rpx 40rpx;'>
  <view>{{fruit.display}}</view>
  <checkbox-group bindchange="checkboxChange" class="row column  around" style='margin:40rpx 0'>
    <label class="row align" wx:for="{{fruit.list}}" wx:key="index">
      <checkbox value="{{item.type}}" disabled="{{item.selected}}" checked="{{item.selected}}"/>
      <view style='margin-right:20rpx'>{{item.name}}</view>
      <view style='font-size:22rpx'>{{item.val}}</view>
    </label>
  </checkbox-group>
  <view>{{'提交参数'+param}}</view>
  <button bindtap="clickResBtn" type='primary' size='mini' style='margin-top:40rpx'>结果</button>
</view>

2,js

Page({
  data: {
   fruit:'21234',
   param:''
  },
  onLoad:function(){
    var selectedNum = this.data.fruit.substr(0,1)
    var fruitString = this.data.fruit.substr(1)
    var fruitArray = fruitString.split('')
	var list=[],display=''
    fruitArray.forEach((v,i)=>{
      var obj ={type:v,selected: selectedNum > i}  //默认选中
      if(v==1) obj.name = '苹果',obj.val='补脑养血、宁神安眠、健脾养心'
      else if(v==2) obj.name = '草莓',obj.val='生津止渴、润肺健脾'
      else if (v==3) obj.name = '葡萄',obj.val='生津消食、缓解疲劳、补血益气'
      else if (v==4) obj.name = '莲雾',obj.val='解热利尿、生津止渴'
      if(obj.selected){
        display += '、'+obj.name
      }
      list.push(obj)
    })
    display = display.substr(1)
    var fruit = {num:selectedNum,display:display,list:list}
    this.setData({
      fruit
    })
   },
   
  checkboxChange:function(e){
    const selectedType = e.detail.value
    selectedType.shift()  //删掉第一个
    var list = this.data.fruit.list
    var fruit = this.data.fruit
    var display =''
    list.forEach(v=>{
      const index = selectedType.indexOf(v.type) 
      v.selected = (index != -1) //修改selected
      if(v.selected){
        display += '、'+v.name 
      }
    })
    display = display.substr(1)
    fruit.list = list
    fruit.display = display
    this.setData({
      fruit
    })
  },
  
  clickResBtn:function(){
    const fruit = this.data.fruit
    const selectedNum = this.data.fruit.num
    var param = ''
    fruit.list.forEach(v=>{
      if(v.selected){
        param = param + v.type
      }
    })
    this.setData({
      param:selectedNum+param
    })
  }
})

3,wxss

.white-view{
  padding: 20rpx;
  border-radius: 16rpx;
  background-color: #fff;
}
.row{
  display: flex;
  flex-direction: row;
}
.column{
  display: flex;
  flex-direction: column;
}
.align{
  align-items: center;
}
checkbox .wx-checkbox-input{
    width: 32rpx;
    height: 32rpx;
 }
 checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   background-color:#2ac315;
 }
 checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
   width: 32rpx;
   height: 32rpx;
   line-height: 32rpx;
   text-align: center;
   font-size: 26rpx;
   color: #fff;
 }
 button[disabled]{
   background-color: #2ac315 !important;
   color: #fff !important;
   font-size: 32rpx !important;
 }