百度智能小程序 多項選擇器組

checkbox-group 多項選擇器組

解釋：多項選擇器組，內(nèi)部由多個 checkbox 組成

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例 1：默認(rèn)樣式

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">默認(rèn)樣式</view>
        <label class="block border-bottom">
            <checkbox checked>多選項一</checkbox>
        </label>
        <label class="block border-bottom">
            <checkbox>多選項二</checkbox>
        </label>
    </view>
</view>

代碼示例 2：列表展示

<view class="wrap">
    <view class="top-description border-bottom">列表展示</view>
    <checkbox-group bindchange="checkboxChange">
        <label class="block border-bottom" s-for="item in items">
            <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.text}}</checkbox>
        </label>
    </checkbox-group>
</view>

Page({
    data: {
        items: [
            {
                text: '多選項一',
                checked: true,
                value: '1'
            },
            {
                text: '多選項二',
                value: '2'
            },
            {
                text: '多選項三',
                value: '3'
            }
        ]
    },
    checkboxChange: e => {
        console.log(e.detail);
    }
});

代碼示例 3：包含禁用選項

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>包含禁用選項</view>
            <view>disabled</view>
        </view>
        <label class="block border-bottom">
            <checkbox value="checkbox1" checked>可用選項</checkbox>
        </label>
        <label class="block border-bottom">              
            <checkbox value="checkbox2">可用選項 </checkbox>
        </label>
        <label class="block border-bottom">
            <checkbox value="checkbox3" disabled color="#C3D1FF" checked></checkbox>
            <text class="disabledText">禁用選項</text>
        </label>
        <label class="block border-bottom">
            <checkbox value="checkbox4" disabled color="#ccc"></checkbox>
            <text class="disabledText">禁用選項</text>
        </label>
    </view>
</view>

Page({
    checkboxChange: e => {
        console.log(e.detail);
    }
});

代碼示例 4：默認(rèn)不選中

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>默認(rèn)不選中</view>
            <view>checked="false"</view>
        </view>
        <checkbox-group bindchange="checkboxChange" >
            <label class="block border-bottom">
                <checkbox value="checkbox1" checked>多選項一</checkbox>
            </label>
            <label class="block border-bottom">
                <checkbox value="checkbox2">多選項二</checkbox>
            </label>
        </checkbox-group>
    </view>
</view>

Page({
    checkboxChange: e => {
        console.log(e.detail);
    }
});

代碼示例 5：自定義顏色

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定義顏色</view>
            <view>color="#00BC89"</view>
        </view>
        <checkbox-group bindchange="checkboxChange" >
            <label class="block border-bottom">
                <checkbox value="checkbox1" color="#00BC89" checked>選項名稱</checkbox>
            </label>
            <label class="block border-bottom">
                <checkbox value="checkbox2" color="#00BC89">選項名稱</checkbox>
            </label>
        </checkbox-group>
    </view>
</view>

Page({
    checkboxChange: e => {
        console.log(e.detail);
    }
});