小程序自定義多選按鈕 給后台傳值方法

小程序自定義多選按鈕

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
        })
    },    
})

 

這樣一個簡單的 多選按鈕就做出來了

效果圖如下 樣式可以自己修改