小程序开发之组件checkbox-group（多项选择器）

最新推荐文章于 2025-06-23 10:53:00 发布

原创最新推荐文章于 2025-06-23 10:53:00 发布 · 6.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

ONE PIECE--小程序专栏收录该内容

134 篇文章

订阅专栏

本文介绍了小程序中的checkbox-group组件，它作为多项选择器，包含多个checkbox。通过示例展示了如何使用checkbox-group和checkbox，包括效果展示和对应的WXML、WXSS及JS代码。

checkbox-group

多项选择器，内部由多个checkbox组成。
在这里插入图片描述

checkbox

多选项目。
在这里插入图片描述

例如：
效果展示

代码
index.wxml

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <!-- 
    value:"sign"  标识，选中时触发<checkbox-group>的bindchange事件，并携带value传的方法中：e.detail.value
    disabled:false  是否禁用
    checked:false   当前是否选中，可用来设置默认选中
    color:#ffffff     checkbox的颜色，同css的color
     -->
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>

index.wxss

label{
  display: flex;
  margin-left: 50rpx;
}

index.js

Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ]
  },
  checkboxChange: function (e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})