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 上编辑此页面！