checkbox（复选框）组件在进行多项选择时会用到

checkbox组件的属性

属性名 类型 默认值 说明
value String 标识，选中时触发的change事件，并携带的value
disabled Boolean false 是否禁用
checked Boolean false 当前是否选中，可用来设置默认选中

在有多项选择的时候，需要结合checkbox-group组件使用，包裹在checkbox组件外。代码如示例3-19所示

  1. index.wxml
  2. --------------
  3. <checkbox-group bindchange="checkboxChange">
  4.   <view wx:for="{{items}}">
  5.     <label>
  6.       <checkbox value="{{item.name}}" checked="{{item.checked}}" />
  7.       {{item.value}}
  8.     </label>
  9.   </view>
  10. </checkbox-group>
  11. -----------------------------------------------------------------------------
  12. index.js
  13. -------------------
  14. Page({
  15.   data: {
  16.     items: [
  17.       { name: 'draw', value: '绘画' },
  18.       { name: 'music', value: '音乐', checked: 'true' },
  19.       { name: 'dance', value: '跳舞' },
  20.       { name: 'chess', value: '下棋' },
  21.       { name: 'sing', value: '唱歌' },
  22.       { name: 'run', value: '跑步' },
  23.     ]
  24.   },
  25.   checkboxChange(e) {
  26.     console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  27.   }
  28. })

image.png