checkbox-group

多项选择器，内部由多个组成。

属性名类型默认值说明
bindchangeEventHandler中选中项发生改变时触发change事件，detail = {value:[选中的checkbox的value的数组]}

checkbox

多选项目。

属性名类型默认值说明
valueString选项的值
disabledBooleanfalse是否禁用
checkedBooleanfalse当前是否选中，可用来设置默认选中
colorColorcheckbox的颜色，同css的color

示例

  1. <view class="page-section page-section-space">
  2.   <view class="page-section-title">默认样式</view>
  3.   <label class="checkbox">
  4.     <checkbox value="cb" checked="true"/>选中
  5.   </label>
  6.   <label class="checkbox">
  7.     <checkbox value="cb" />未选中
  8.   </label>
  9. </view>
  11. <view class="page-section">
  12.   <view class="page-section-title page-section-title-space">推荐展示样式</view>
  13.   <view class="ttui-cells">
  14.     <checkbox-group bindchange="checkboxChange">
  15.       <label class="ttui-cell" :for="{{items}}" :key="{{item.value}}">
  16.         <view class="ttui-cell__hd">
  17.           <checkbox value="{{item.value}}"
  18.             checked="{{item.checked}}"/>
  19.         </view>
  20.         <view class="ttui-cell__bd">{{item.name}}</view>
  21.       </label>
  22.     </checkbox-group>
  23.   </view>
  24. </view>
  1. Page({
  2.   data: {
  3.     items: [
  4.       {value: 'xigua', name: '西瓜视频'},
  5.       {value: 'toutiao', name: '今日头条', checked: 'true'},
  6.       {value: 'huoshan', name: '火山小视频'},
  7.       {value: 'douyin', name: '抖音'},
  8.       {value: 'duanzi', name: '内涵段子'},
  9.       {value: 'flipgaram', name: 'Flipagram'},
  10.     ]
  11.   },
  12.   checkboxChange: function(e) {
  13.     console.log('Checkbox 发生 change 事件，value 值为：', e.detail.value)
  15.     var items = this.data.items, values = e.detail.value;
  16.     for (var i = 0, lenI = items.length; i < lenI; ++i) {
  17.       items[i].checked = false;
  19.       for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
  20.         if(items[i].value == values[j]){
  21.           items[i].checked = true;
  22.           break
  23.         }
  24.       }
  25.     }
  27.     this.setData({
  28.       items: items
  29.     })
  30.   }
  31. })

checkbox-group - 图1

原文: https://developer.toutiao.com/docs/comp/checkbox.html