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

Posted 2020-11-26 吃橘子的小蜗牛

小程序自定义多选按钮

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;
    width: 200rpx;
}
.checkbox{
    position: relative;
    height: 100rpx;
    line-height: 100rpx;
    width: 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
        })
    },    
})

 

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

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