看一下效果：

思想是在radio选择标签上定义伪元素，然后盖上去；
WXML：

     <radio-group class="item-right radio-group">
          <label class="radio" wx:for="{{items}}">
               <radio value="{{item.name}}" checked="{{item.checked}}"/><text class='info'>{{item.name}}</text>
          </label>
     </radio-group>

CSS:

.radio{
    display: block;
    border-bottom: 2rpx solid #f5f5f5;
    padding: 24rpx 30rpx;
}

/* 自定义 radio 样式 */
radio{
    margin-right: 10rpx;
}
 .info{
     display: inline-block;
     vertical-align: middle;
 }
radio .wx-radio-input{
    border-radius: 50%; 
    width: 36rpx;
    height: 35rpx;
}
 
/* 选中后的样式 （可根据设计稿需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before{
    border-radius: 50%;
    width: 54rpx; 
    height: 54rpx; 
    line-height: 54rpx;
    text-align: center;
    font-size: 26rpx; 
    background: #09504c;
    border-color: #09504c;
}

JS:

    data: {

        items: [
            { name: '男', checked: true },
            { name: '女', checked: false }
        ],

    },

更改checkbox的样式，效果如下图：

<checkbox-group bindchange="checkAll">
    <label class="checkbox ft-30">
        <checkbox value='all' checked="{{selectAllStatus}}"/>全选
    </label>
</checkbox-group>

CSS:

/* 自定义 checkbox 样式 */
checkbox-group{
    width: 50rpx; 
}
 
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
    border-radius: 50%;/* 圆角 */
    width: 40rpx; /* 背景的宽 */
    height: 40rpx; /* 背景的高 */
}
 
/* 选中后的样式 （可根据设计稿需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
    background: #2facff;
    border-color: #2facff;
}
 
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
    border-radius: 50%;
    width: 46rpx;
    height: 46rpx;
    line-height: 46rpx;
    text-align: center;
    font-size: 28rpx; /* 对勾大小 28rpx */
    color: #fff; /* 对勾颜色 白色 */
    background: transparent;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}

JS:

Page({
    data: {
        selectAllStatus: false,  //底部全选
    }
})