微信小程序-checkbox复选框

微信小程序-checkbox复选框

demo.wxml

<!-- 
  checkbox 复选框
  1 checkbox标签 必须要和 父元素 radio-group 来使用
  2 value 选中的单选框的值
  3 需要给 radio-group 绑定 change 事件
  4 需要在页面中显示 选中的值
 -->
<view>
  <checkbox-group bindchange="HandelItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>
  </checkbox-group>
  <view>
    选中的水果:{{checkedList}}
  </view>
</view>

demo.js

// pages/demo15/demo15.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:0,
        name:"苹果",
        value:"apple"
      },
      {
        id:1,
        name:"葡萄",
        value:"grape"
      },
      {
        id:2,
        name:"香蕉",
        value:"bananer"
      }
    ],
    checkedList:[]
  },
  // 复选框的选中事件
  HandelItemChange(e){
    // 1 获取被选中的复选框的值
    const checkedList = e.detail.value;
    // 2 进行赋值
    this.setData({
      checkedList
    })
  }
})

示例