checkbox-group 多项选择器组

解释:多项选择器组,内部由多个 checkbox 组成

# 属性说明

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

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 代码示例 1:默认样式

    <view class="wrap">
        <view class="card-area">
            <view class="top-description border-bottom">默认样式</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:默认不选中

          <view class="wrap">
              <view class="card-area">
                  <view class="top-description border-bottom">
                      <view>默认不选中</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);
                }
            });