小程序： 自定义 -- 单选radio、多选checkbox的样式

1. 单选 radio

(1) wxml

  <view>
    <!-- 单项选择器radio-group: 内部由多个<radio/>组成 -->
    <radio-group bindchange="radioChange" >
      <view wx:for="{{radioData}}" wx:key="index">
        <label>
          <radio value="{{index}}">{{item.name}}</radio>
        </label>
      </view>
    </radio-group>
  </view>

(2) wxss

/* 未选中  样式*/
radio .wx-radio-input{
   width: 30rpx;
   height: 30rpx;
   border-radius: 50%;
}

/* 选中  样式(无边框、紫色背景 -- 可自定义) */
radio .wx-radio-input.wx-radio-input-checked{
   border: none;
   background: purple!important;
}

/* 选中时 对勾样式 （白色对勾 -- 可自定义） */
radio .wx-radio-input.wx-radio-input-checked::before{
   width: 30rpx;   /* 选中时对勾大小，不要超过背景的尺寸 */
   height: 30rpx;   /* 选中时对勾大小，不要超过背景的尺寸 */
   line-height: 30rpx;
   border-radius: 50%;
   text-align: center;
   font-size: 20rpx; /* 对勾大小 */
   color: #fff; /* 对勾颜色 */
   background: transparent;
   transform: translate(-50%, -50%) scale(1);
   -webkit-transform: translate(-50%, -50%) scale(1);
}

(3) js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    radioData: [
      {name: ‘苹果‘ },
      {name: ‘香蕉‘ },
      {name: ‘猕猴桃‘},
    ]
  },

  radioChange: (res) => {
    console.log(res)
  }
})

效果呈现：

2. 多选 checkbox -- 只需要将上面代码中所有的 radio  替换成  checkbox 即可

(1) wxml

<view>
    <!-- 多项选择器checkbox-group: 内部由多个checkbox组成 -->
    <checkbox-group bindchange="checkboxChange" >
      <view wx:for="{{checkboxData}}" wx:key="index">
        <label>
          <checkbox value="{{index}}">{{item.name}}</checkbox>
        </label>
      </view>
    </checkbox-group>
</view>

(2) wxss

/* 未选中  样式*/
checkbox .wx-checkbox-input{
   width: 30rpx;
   height: 30rpx;
   border-radius: 50%;
}

/* 选中  样式(无边框、紫色背景 -- 可自定义) */
checkbox   .wx-checkbox-input.wx-checkbox-input-checked{
   border: none;
   background: purple!important;
}

/* 选中时 对勾样式 （白色对勾 -- 可自定义） */
checkbox   .wx-checkbox-input.wx-checkbox-input-checked::before{
   width: 30rpx;   /* 选中时对勾大小，不要超过背景的尺寸 */
   height: 30rpx;   /* 选中时对勾大小，不要超过背景的尺寸 */
   line-height: 30rpx;
   border-radius: 50%;
   text-align: center;
   font-size: 20rpx; /* 对勾大小 */
   color: #fff; /* 对勾颜色 */
   background: transparent;
   transform: translate(-50%, -50%) scale(1);
   -webkit-transform: translate(-50%, -50%) scale(1);
}

(3) js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    checkboxData: [
      {name: ‘苹果‘ },
      {name: ‘香蕉‘ },
      {name: ‘猕猴桃‘},
    ]
  },

  checkboxChange: (res) => {
    console.log(res)
  }
})

原文地址：https://www.cnblogs.com/ljr210/p/9929749.html