checkbox

解释： 多选项目

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

示例：在开发者工具中预览效果

  1. <!-- checkbox.swan -->
    <form bind:submit="formSubmit">
        <checkbox-group bind:change="checkboxChange" name="citylist">
            <view class="checkbox" s-for="item in items">
                <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.text}}</checkbox>
            </view>
            <view class="checkbox">
                <checkbox value="red" color="red">我是红色的</checkbox>
            </view>
            <view class="checkbox">
                <checkbox value="disabled" disabled>我不可用</checkbox>
            </view>
        </checkbox-group>
        <button formType="submit">提交</button>
        <button formType="reset">重置</button>
    </form>

  1. // checkbox.js
    Page({
        data: {
            items: [
                {
                    value: 'China',
                    text: '中国'
                },
                {
                    value: 'US',
                    text: '美国'
                },
                {
                    value: 'Britain',
                    text: '英国',
                    checked: true
                }
            ]
        },
        checkboxChange(e) {
            console.log(e.detail);
        },
        formSubmit(e) {
            // todo someThing
        }
    });

checkbox-group

解释：
多项选择器

内部由多个 checkbox 组成

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