微信小程序checkbox多选

效果图

html 复制代码
<view class="block">
    <view class="header">
        <view class="header-left">
            <text class="pu-title">数据</text>
            <text class="pu-tip">至少选择一个指标</text>
        </view>
        <image bind:tap="onVisibleChange" class="close" src="/images/data/close.png" />
    </view>
    <t-checkbox-group value="{{checkAllValues}}" bind:change="onChange">
        <t-checkbox label="多选" icon="rectangle" checkAll />
        <view  class="popup-content">
            <view wx:for="{{popupList}}" wx:key="index" class="pell-box">
                <t-checkbox
                    class="p-cell {{_.contain(checkAllValues, item.value) ? 'activeCell' : checkAllValues.indexOf(item.value)}}"
                    value="{{item.value}}"
                    icon="none"
                >
                    <view style="{{_.contain(checkAllValues, item.value) ? 'color: #FA541C' : 'color: #333333'}}">
                        {{item.name}}
                    </view>
                </t-checkbox>
            </view>
        </view>
    </t-checkbox-group>
    <view class="handleConfirm" bindtap="handleConfirm">确定</view>
  </view>

data里定义

js 复制代码
data: {
popupList: [
    { name: '当前班组', value: '当前班组', check: false},
    { name: '今天', value: '今天', check: false},
    { name: '本周', value: '本周', check: false},
    { name: '本月', value: '本月', check: false},
    { name: '自定义时间', value: '自定义时间', check: false},
  ],
  checkAllValues: [],
}
onChange(e) {
    console.log('checkbox', e.detail.value);
    this.setData({ checkAllValues: e.detail.value });
  },
css 复制代码
.popup-content {
    display: flex;
    flex-wrap: wrap;
    padding: 0 30rpx 30rpx 30rpx;
}
.pell-box {
    margin-right: 38rpx;
    margin-bottom: 30rpx;
}
.p-cell {
    width: 201rpx;
    height: 62rpx;
    border-radius: 6rpx;
    border: 1rpx solid #333333;
    box-sizing: border-box;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pell-box:nth-child(3n) {
    margin-right: 0;
}
.close {
    width: 31rpx;
    height: 30rpx;
}
.block {
    width: 100vw;
    min-height: 340px;
    background: #fff;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
}
.header {
    display: flex;
    height: 100rpx;
    padding: 30rpx 30rpx 0 30rpx;
    justify-content: space-between;
}
.header-left {
    display: flex;
    flex-direction: column;
}
.pu-title {
    font-size: 34rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    color: #222222;
}
.pu-tip {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #666666;
}
.handleConfirm {
    width: 690rpx;
    height: 80rpx;
    background: #FF6634;
    border-radius: 10rpx;
    font-size: 36rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
    margin: 0 auto;
}
.activeCell {
    background: #FFF8F5;
    border-radius: 6rpx;
    border: 1rpx solid #FA541C;
    box-sizing: border-box;
    color: rgba(250, 84, 28, 1)!important;
}
.t-checkbox__title, .t-checkbox__title--checked {
    color: rgba(250, 84, 28, 1)!important;
}
相关推荐
程序员入门进阶5 小时前
基于微信小程序的电子购物系统的设计与实现(lw+演示+源码+运行)
微信小程序·小程序
程序员入门进阶6 小时前
智能社区服务小程序+ssm
小程序·apache
guanpinkeji6 小时前
搭子小程序定制开发:全新找搭子之旅
大数据·小程序·小程序开发·小程序制作·找搭子·搭子小程序
chusheng18406 小时前
Java基于小程序公考学习平台的设计与实现(附源码,文档)
java·学习·小程序·公考小程序·公考学习小程序
一 乐6 小时前
综合文化信息管理系统|基于java和小程序的综合文化信息管理系统设计与实现(源码+数据库+文档)
java·数据库·小程序·综合文化系统小程序
虞书欣的69 小时前
Python小游戏25——黄金矿工
开发语言·人工智能·游戏·小程序·pygame
我很苦涩的10 小时前
微信小程序使用uni cli框架绘制echarts图表
微信小程序·小程序·echarts
慢慢雨夜12 小时前
uniapp发布到微信小程序,提示接口未配置在app.json文件中
微信小程序·小程序·uni-app
14 小时前
躺平成长-利用kimi智能编辑助手开发小程序第(10)天
小程序
编程指南针15 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序