小程序自定义多选按钮 给后台传值方法

小程序自定义多选按钮

1、html部分

<checkbox-group bindchange="checkboxChange" class = "flex">
    <label class="checkbox {{item.checked?'active':''}}"
        wx:for="{{items}}"
        bindtap="addclass"
        data-index="{{index}}">
        <checkbox value="{{item.name}}" checked="{{item.checked}}"/>
        {{item.value}}
    </label>
</checkbox-group>

2、css部分

.checkbox{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100rpx;
     200rpx;
}
.checkbox{
    position: relative;
    height: 100rpx;
    line-height: 100rpx;
     200rpx;
    background: #ccc;
    color: #fff;
    font-size: 28rpx;
    border-radius: 50rpx;
    margin: 20rpx;
    text-align: center;
    padding: 0 20rpx;
    box-sizing: border-box;
}
.flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.active{
    background: #FED52F;
}

3、//JavaScript部分

Page({
    data: {
        items: [
            { name: 'USA', value: '美国', checked: false },
            { name: 'CHN', value: '中国', checked: true },
            { name: 'BRA', value: '巴西', checked: false },
            { name: 'JPN', value: '日本', checked: false },
            { name: 'ENG', value: '英国', checked: false },
            { name: 'TUR', value: '法国', checked: false },
        ]
    },
    checkboxChange: function (e) {
        console.log('checkbox发生change事件，携带value值为：', e.detail.value)
    },
    //添加class 样式
    addclass:function(e){
        let self = this
        //获取数据
        let list = self.data.items
        //获取index
        let index = e.currentTarget.dataset.index
        //如果为true变为false
        if(list[index].checked){
            list[index].checked=false
        }else{
            list[index].checked = true
        }
        //重新赋值
        self.setData({
            items:list
        })
    },    
})

这样一个简单的 多选按钮就做出来了

效果图如下 样式可以自己修改