• checkbox-group
  • checkbox

    checkbox-group

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

    属性说明

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

    checkbox

    多选项目。

    属性说明

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

    示例

    1. <template>
    2.     <view>
    3.         <view class="uni-padding-wrap uni-common-mt">
    4.             <view class="uni-title uni-common-mt">默认样式</view>
    5.             <view>
    6.                 <checkbox-group>
    7.                     <label>
    8.                         <checkbox value="cb" checked="true" />选中
    9.                     </label>
    10.                     <label>
    11.                         <checkbox value="cb" />未选中
    12.                     </label>
    13.                 </checkbox-group>
    14.             </view>
    15.             <view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
    16.             <view>
    17.                 <checkbox-group>
    18.                     <label>
    19.                         <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
    20.                     </label>
    21.                     <label>
    22.                         <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
    23.                     </label>
    24.                 </checkbox-group>
    25.             </view>
    26.         </view>
    28.         <view class="uni-padding-wrap">
    29.             <view class="uni-title uni-common-mt">
    30.                 推荐展示样式
    31.                 <text>\n使用 uni-list 布局</text>
    32.             </view>
    33.         </view>
    34.         <view class="uni-list">
    35.             <checkbox-group @change="checkboxChange">
    36.                 <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
    37.                     <view>
    38.                         <checkbox :value="item.value" :checked="item.checked" />
    39.                     </view>
    40.                     <view>{{item.name}}</view>
    41.                 </label>
    42.             </checkbox-group>
    43.         </view>
    44.     </view>
    45. </template>
    46. <script>
    47.     export default {
    48.         data() {
    49.             return {
    50.                 title: 'checkbox 复选框',
    51.                 items: [{
    52.                         value: 'USA',
    53.                         name: '美国'
    54.                     },
    55.                     {
    56.                         value: 'CHN',
    57.                         name: '中国',
    58.                         checked: 'true'
    59.                     },
    60.                     {
    61.                         value: 'BRA',
    62.                         name: '巴西'
    63.                     },
    64.                     {
    65.                         value: 'JPN',
    66.                         name: '日本'
    67.                     },
    68.                     {
    69.                         value: 'ENG',
    70.                         name: '英国'
    71.                     },
    72.                     {
    73.                         value: 'FRA',
    74.                         name: '法国'
    75.                     }
    76.                 ]
    77.             }
    78.         },
    79.         methods: {
    80.             checkboxChange: function (e) {
    81.                 var items = this.items,
    82.                     values = e.detail.value;
    83.                 for (var i = 0, lenI = items.length; i < lenI; ++i) {
    84.                     const item = items[i]
    85.                     if(values.includes(item.value)){
    86.                         this.$set(item,'checked',true)
    87.                     }else{
    88.                         this.$set(item,'checked',false)
    89.                     }
    90.                 }
    91.             }
    92.         }
    93.     }
    94. </script>
    96. <style>
    97. .uni-list-cell {
    98.     justify-content: flex-start
    99. }
    100. </style>

    uniapp

    示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中

    预览H5效果：使用浏览器的手机模式访问https://uniapp.dcloud.io/h5/pages/component/checkbox/checkbox

    注意

    • checkbox的默认颜色，在不同平台不一样。微信小程序是绿色的，头条小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
    • 如需调节checkbox大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"

    发现错误？想参与编辑？在 GitHub 上编辑此页面！