小程序本来的写法无法满足设计图要求，单选框和复选框需要改成长方形的样式。
wxml
<view class="txt">您目前的年龄段(单选)：<span class="red">*</span></view>
<view class="input_list">
<radio-group class="radio-label" bindchange="bindPickerChangeAge">
<label class="radio" wx:for="{{agearr}}" wx:key="key">
<view><view class="label">{{item}}</view><radio value="{{item}}" /></view>
</label>
</radio-group>
</view>
<view class="txt">您是否已经确诊(可多选)：<span class="red">*</span></view>
<view class="input_list">
<checkbox-group class="checkbox-label" bindchange="bindPickerChangeIsqz">
<label class="checkbox" wx:for="{{isqzarr}}" wx:key="key">
<view><view class="label">{{item}}</view><checkbox value="{{item}}" /></view>
</label>
</checkbox-group>
</view>wxss
.txt{ width: 100%; height: 60rpx; line-height: 60rpx; font-size: 30rpx; font-weight: 500; color: #666666; display: flex; }
.txt .red{ color: red; }
.input_list{ width: 100%; height: auto; margin: 0 auto; padding-bottom: 20rpx; }
.radio-label label,.checkbox-label label{ display: inline-block; }
radio .wx-radio-input,checkbox .wx-checkbox-input{
width: 340rpx;
height: 60rpx;
margin-top: 20rpx;
background: #fff;
border: solid 1rpx #ccc;
border-radius: 10rpx;
float: left;
}
.radio-label .label,.checkbox-label .label{
z-index: 1;
position: absolute;
width: 340rpx;
height: 60rpx;
line-height: 65rpx;
margin-top: 20rpx;
font-size: 28rpx;
color: #333;
text-align: center;
border-radius: 10rpx;
}
/*单选，多选按钮选中后背景样式 */
radio .wx-radio-input.wx-radio-input-checked,checkbox .wx-checkbox-input.wx-checkbox-input-checked {
width: 340rpx;
height: 60rpx;
background: #FFF2F2;
border: solid 1px #E6322E;
border-radius: 10rpx;
}
/*单选，多选按钮选中后勾勾样式*/
radio .wx-radio-input.wx-radio-input-checked::before,checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
background: #FFF2F2;
border-radius: 10rpx;
content: '';
}js
Page({
/**
* 页面的初始数据
*/
data: {
agearr: ["16岁—25岁","26岁—35岁","36岁—45岁","46岁—55岁","56岁—65岁","66岁—75岁"],
isqzarr: ["哮喘","尘肺矽肺","肺气肿","肺大泡","慢阻肺","间质性肺病","慢性支气管炎","肺部纤维化","支气管扩张","肺结节","其他"]
},
//年龄
bindPickerChangeAge: function(e) {
console.log(e.detail.value)
this.setData({
age: e.detail.value
})
},
//是否确诊
bindPickerChangeIsqz: function(e) {
console.log(e.detail.value)
this.setData({
isqz: e.detail.value
})
},
})效果图如下：
?
