checkbox

优质

小牛编辑

134浏览

2023-12-01

checkbox-group

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

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

checkbox

多选项目。

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

示例代码

<!--checkbox.jxml-->
<view class="section">
    <view class="section-title">默认样式</view>
        <checkbox-group bindchange="checkboxChange">
            <label class="checkbox"><checkbox value="cb" checked="true" color="{{color}}" />选中
            </label>
            <label class="checkbox"><checkbox value="cb" color="{{color}}" />未选中
            </label>
            <label class="checkbox"><checkbox value="cb" color="{{color}}" disabled />禁用未选中
            </label>
        </checkbox-group>
</view>
<view class="section">
    <view class="section-title">checkbox-group 演示</view>
        <checkbox-group bindchange="checkboxChange">
            <label jd:for="{{items}}" jd:key="{{item.value}}">
                <view class="control-row">
                    <checkbox value="{{item.value}}" checked="{{item.checked}}" />
                    <view>{{item.name}}</view>
                </view>
            </label>
        </checkbox-group>
</view>

//checkbox.js
Page({
  data: {
     items: [{ value: '1', name: '香蕉' }, { value: '2', name: '苹果', checked: 'true' }, { value: '3', name: '橘子' }, { value: '4', name: '西瓜', disabled: true },]

  },
  checkboxChange: function(e) {
    console.log('触发change事件，value值为：', e.detail.value)
  }
})