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

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

单选

 <!-- 个性服务 -->
        <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 checked='{
    {check}}' id="radios" bindtap='radiocon'></radio> <label for="radios">匿名</label> -->
                <!-- <view wx:for="{
    {authData}}" wx:key="index" class="addr-item {
    {item.selected?'selectedItem':''}}" data-index='{
    {index}}' catchtap="checkboxChange">{
    {item.title}}</view> -->

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