字节跳动小程序开发组件文档 checkbox-group

由 卓别林 创建, 最后一次修改 2019-08-09

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

属性名 类型 默认值 说明 最低版本
bindchange EventHandler 中选中项发生改变时触发change事件,detail = {value:[选中的checkbox的value的数组]} 1.0.0

checkbox


多选项目。

属性名 类型 默认值 说明 最低版本
value String 选项的值 1.0.0
disabled Boolean false 是否禁用 1.0.0
checked Boolean false 当前是否选中,可用来设置默认选中 1.0.0
color Color checkbox的颜色,同css的color 1.0.0

示例

开发者工具中预览

<view class="page-section page-section-space">
  <view class="page-section-title">默认样式</view>
  <label class="checkbox">
    <checkbox value="cb" checked="true"/>选中
  </label>
  <label class="checkbox">
    <checkbox value="cb" />未选中
  </label>
</view>

<view class="page-section">
  <view class="page-section-title page-section-title-space">推荐展示样式</view>
  <view class="ttui-cells">
    <checkbox-group bindchange="checkboxChange">
      <label class="ttui-cell" tt:for="{{items}}" tt:key="{{item.value}}">
        <view class="ttui-cell__hd">
          <checkbox value="{{item.value}}"
            checked="{{item.checked}}"/>
        </view>
        <view class="ttui-cell__bd">{{item.name}}</view>
      </label>
    </checkbox-group>
  </view>
</view>
Page({
  data: {
    items: [
      {value: 'xigua', name: '西瓜视频'},
      {value: 'toutiao', name: '今日头条', checked: 'true'},
      {value: 'huoshan', name: '火山小视频'},
      {value: 'douyin', name: '抖音'},
      {value: 'duanzi', name: '内涵段子'},
      {value: 'flipgaram', name: 'Flipagram'},
    ]
  },
  checkboxChange: function(e) {
    console.log('Checkbox 发生 change 事件,value 值为:', e.detail.value)

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

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

    this.setData({
      items: items
    })
  }
})


以上内容是否对您有帮助:
二维码
建议反馈
二维码