[wechat applet: single or multiple styles, background color, rounded corners]

【 Wechat applet ： The radio 、 Multiple styles , Background color , Round corners 】

The radio

 <!--  Personalized service  -->
        <view class="addrBox-item">
            <view class="addr-head">
                <image src="/image/leftIcon.png" class="leftIconImg"></image>
                <view class="item-title"> Personalized service </view>
            </view>
            <!-- -->
            <view class="addr-box">
                <!-- <radio checked='{
    {check}}' id="radios" bindtap='radiocon'></radio> <label for="radios"> anonymous </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>

 //  The radio 
        radios: [{
    
                value: 'aa',
                name: ' Support OEM ',
                // checked: 'true'
            },
            {
    
                value: 'bb',
                name: ' A replacement '
            },
        ]

 //  Radio buttons 
    radioChange(e) {
    
        console.log('radio happen change event , carry value The value is ：', 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 box style  */
/*  Initial style  */
radio .wx-radio-input {
    
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
}

/*  Selected   Background style  （  background   Frame  ） */
radio .wx-radio-input.wx-radio-input-checked {
    
    /*  Check the size of the tick when it is selected , Don't exceed the size of the background  */
    width: 32rpx;
    height: 32rpx;
    background: #ff3b3b !important;
    border-radius: 50%;
    border: 1px solid #ff3b3b !important;
}

/*  Selected   Check style  */
radio .wx-radio-input.wx-radio-input-checked::before {
    
    /*  Check the size of the tick when it is selected , Don't exceed the size of the background  */
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    font-size: 28rpx;
    /*  Check size  */
    font-weight: 400;
    color: #fff;
    /*  Check the color  */
    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;
}

multi-select

 <!--  Personalized service  -->
        <view class="addrBox-item">
            <view class="addr-head">
                <image src="/image/leftIcon.png" class="leftIconImg"></image>
                <view class="item-title"> Personalized service </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>

/*  Radio box style  */
/*  Initial style  */
checkbox .wx-checkbox-input {
    
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
}

/*  Selected   Background style  （  background   Frame  ） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    
    /*  Check the size of the tick when it is selected , Don't exceed the size of the background  */
    width: 32rpx;
    height: 32rpx;
    background: #ff3b3b !important;
    border-radius: 50%;
    border: 1px solid #ff3b3b !important;
}

/*  Selected   Check style  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    
    /*  Check the size of the tick when it is selected , Don't exceed the size of the background  */
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    font-size: 28rpx;
    /*  Check size  */
    font-weight: 400;
    color: #fff;
    /*  Check the color  */
    background: #ff3b3b !important;
    border-radius: 50%;
    border: 1px solid #ff3b3b !important;

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

  //  multi-select 
        checkData: [{
    
                value: 'isOem',
                name: ' Support OEM ',
                // checked: 'true'
            },
            {
    
                value: 'isDropShipping',
                name: ' A replacement '
            }
        ],
    },
    //  multi-select 
    Check(e) {
    
        console.log('checkbox happen change event , carry value The value is ：', 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, ' Choose ');
        } else {
    
        }
    },