微信小程序----checkbox组件

最新推荐文章于 2025-06-24 10:01:54 发布

原创最新推荐文章于 2025-06-24 10:01:54 发布 · 654 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用微信小程序中的Checkbox组件实现多选功能，并通过示例代码展示了如何响应选择变化及展示选择结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序----checkbox组件

DEMO下载

效果图

checkbox组件效果图

WXML

<view class="tui-content">
  <checkbox-group bindchange="checkboxChange">
    <label class="checkbox" wx:for="{{items}}">
      <view class="tui-menu-list"><checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view>
    </label>
  </checkbox-group>
  <view class="tui-show-name">
    <text wx:for="{{checkArr}}"> {{item}} </text>
  </view>
</view>

JS

Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ],
    checkArr: ['中国']
  },
  checkboxChange: function (e) {
    var arr = [];
    e.detail.value.forEach(current => {
      for (var value of this.data.items){
        if(current === value.name){
          arr.push(value.value);
          break;
        } 
      }
    });
    this.setData({checkArr: arr});
  }
})