checkbox-group 多选
- 属性说明
- 示例
  - 代码示例

checkbox-group 多选

解释：多项选择组件，为开发者提供多项选择功能。

属性说明

属性名	类型	必填	默认值	说明
value	Array	否	[]	已选的值
disabled	Boolean	否	false	是否禁止点击
column	Number	否	1	组件按照几列展示
options	Array	是		组件内容数组，如： [{ name: ‘两字’, value: ‘1’, desc: ‘描述’ }]，其中 name 为展示文案， value 为对应的值， desc 为描述文案
options-key	String	否	name	options 数组中的 key，如 name
itemStyle	Object	否	{}	组件每一项的内联样式，如： { color: ‘#2772fb’}
iconStyle	Object	否	{}	组件某一项选中时的 icon 样式，如： { color: ‘#2772fb’, name: ‘checked-l’ }
active-text-color	String	否	#2772fb	选中时的文字颜色
active-icon-color	String	否	#2772fb	选中时的 icon 颜色
active-bg-color	String	否	rgba ( 39 , 114 , 251, .04 )	选中时的背景颜色
checkbox-group-class	String	否		组件的外部样式类，可用于修改组件最外层样式
bindchange	EventHandle	否		点击组件每一项时触发，可用于获取已选择的 value 值

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON

<!-- 三列样式 -->
<smt-checkbox-group
    column="3"
    option-key="name"
    options="{{threeColumnOptions}}"
    value="{{[7]}}"
    bind:change="groupChange"
>
</smt-checkbox-group>
<!-- 两列样式 -->
<smt-checkbox-group
    option-key="name"
    column="2"
    options="{{twoColumnOptions}}"
    value="{{[5]}}"
    bind:change="groupChange"
>
</smt-checkbox-group>
<!-- 三列禁止样式 -->
<smt-checkbox-group
    option-key="name"
    checkbox-group-class="checkbox-group"
    column="3"
    options="{{threeColumnDisabledOptions}}"
    value="{{[1]}}"
    bind:change="groupChange"
>
</smt-checkbox-group>