【微信小程序：单选、多选样式，背景色，圆角】

【微信小程序：单选、多选样式，背景色，圆角】

单选

 
        <view class="addrBox-item">
            <view class="addr-head">
                <image src="/image/leftIcon.png" class="leftIconImg">image>
                <view class="item-title">个性服务view>
            view>
            
            <view class="addr-box">
                
                

                <radio-group bindchange="radioChange" class="radio_group">
                    <label class="check_label" wx:for="{{radios}}" wx:key="index">

                        <view class="radioBox">
                            <radio value="{{item.value}}" />
                            <view class="radionName">{{item.name}}view>
                        view>

                    label>
                radio-group>

            view>
        view>

 // 单选
        radios: [{
                value: 'aa',
                name: '支持贴牌',
                // checked: 'true'
            },
            {
                value: 'bb',
                name: '一件代发'
            },
        ]

 // 单选框
    radioChange(e) {
        console.log('radio发生change事件，携带value值为：', e.detail.value)
        const radios = this.data.radios;
        for (let i = 0; i < radios.length; ++i) {
            radios[i].checked = radios[i].value === e.detail.value
        }
        this.setData({
            radios
        })
    },

/* 单选框样式 */
/* 初始样式 */
radio .wx-radio-input {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
}

/* 选中后的 背景样式 （ 背景 边框 ） */
radio .wx-radio-input.wx-radio-input-checked {
    /* 选中后对勾大小，不要超过背景的尺寸 */
    width: 32rpx;
    height: 32rpx;
    background: #ff3b3b !important;
    border-radius: 50%;
    border: 1px solid #ff3b3b !important;
}

/* 选中后的 对勾样式  */
radio .wx-radio-input.wx-radio-input-checked::before {
    /* 选中后对勾大小，不要超过背景的尺寸 */
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    font-size: 28rpx;
    /* 对勾大小 */
    font-weight: 400;
    color: #fff;
    /* 对勾颜色  */
    background: #ff3b3b !important;
    border-radius: 50%;
    border: 1px solid #ff3b3b !important;

    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}




.radio_group {
    display: flex;
}

.check_label {
    display: flex;
    align-items: center;
    margin-right: 40rpx;
}

.radioBox {
    display: flex;
}

.radionName {
    margin-left: 4rpx;
}

多选

 
        <view class="addrBox-item">
            <view class="addr-head">
                <image src="/image/leftIcon.png" class="leftIconImg">image>
                <view class="item-title">个性服务view>
            view>
            
            <view class="addr-box">
                <checkbox-group bindchange="Check" class="radio_group">
                    <label class="check_label" wx:for="{{checkData}}" wx:key="index">
                        <view class="radioBox">
                            <checkbox value="{{item.value}}" checked="{{item.checked}}" />
                        view>
                        <view class="radionName">{{item.name}}view>
                    label>
                checkbox-group>

            view>
        view>

/* 单选框样式 */
/* 初始样式 */
checkbox .wx-checkbox-input {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
}

/* 选中后的 背景样式 （ 背景 边框 ） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    /* 选中后对勾大小，不要超过背景的尺寸 */
    width: 32rpx;
    height: 32rpx;
    background: #ff3b3b !important;
    border-radius: 50%;
    border: 1px solid #ff3b3b !important;
}

/* 选中后的 对勾样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    /* 选中后对勾大小，不要超过背景的尺寸 */
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    font-size: 28rpx;
    /* 对勾大小 */
    font-weight: 400;
    color: #fff;
    /* 对勾颜色  */
    background: #ff3b3b !important;
    border-radius: 50%;
    border: 1px solid #ff3b3b !important;

    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}

  // 多选
        checkData: [{
                value: 'isOem',
                name: '支持贴牌',
                // checked: 'true'
            },
            {
                value: 'isDropShipping',
                name: '一件代发'
            }
        ],
    },
    // 多选
    Check(e) {
        console.log('checkbox发生change事件，携带value值为：', e.detail.value)

        const checkData = this.data.checkData;
        const values = e.detail.value;
        for (let i = 0, lenI = checkData.length; i < lenI; ++i) {
            checkData[i].checked = false;

            for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
                if (checkData[i].value === values[j]) {
                    checkData[i].checked = true;
                    break;
                }
            }
        }

        this.setData({
            checkData
        })
        console.log(this.data.checkData);
        if (this.data.checkData[0].checked) {
            console.log(this.data.checkData[0].checked, '选中');
        } else {
        }
    },