checkbox-group

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

属性名类型默认值说明
bindchangeEventHandle<checkbox-group/> 中选中项发生改变是触发 change 事件，detail = {value: [ 选中的 checkbox 的 value 的数组 ]}

checkbox

多选项目。

属性名类型默认值说明
valueString<checkbox/> 标识，选中时触发 <checkbox-group/> 的 change 事件，并携带 <checkbox/> 的 value
disabledBooleanfalse是否禁用
checkdBooleanfalse当前是否选中，可用来设置默认选中
colorColorcheckbox 的颜色，同 css 的 color

示例代码

  1. <!--checkbox.jxml-->
  2. <view class="section">
  3.     <view class="section-title">默认样式</view>
  4.         <checkbox-group bindchange="checkboxChange">
  5.             <label class="checkbox"><checkbox value="cb" checked="true" color="{{color}}" />选中
  6.             </label>
  7.             <label class="checkbox"><checkbox value="cb" color="{{color}}" />未选中
  8.             </label>
  9.             <label class="checkbox"><checkbox value="cb" color="{{color}}" disabled />禁用未选中
  10.             </label>
  11.         </checkbox-group>
  12. </view>
  13. <view class="section">
  14.     <view class="section-title">checkbox-group 演示</view>
  15.         <checkbox-group bindchange="checkboxChange">
  16.             <label jd:for="{{items}}" jd:key="{{item.value}}">
  17.                 <view class="control-row">
  18.                     <checkbox value="{{item.value}}" checked="{{item.checked}}" />
  19.                     <view>{{item.name}}</view>
  20.                 </view>
  21.             </label>
  22.         </checkbox-group>
  23. </view>
  1. //checkbox.js
  2. Page({
  3.   data: {
  4.      items: [{ value: '1', name: '香蕉' }, { value: '2', name: '苹果', checked: 'true' }, { value: '3', name: '橘子' }, { value: '4', name: '西瓜', disabled: true },]
  6.   },
  7.   checkboxChange: function(e) {
  8.     console.log('触发change事件，value值为：', e.detail.value)
  9.   }
  10. })

checkbox - 图1