对于小程序单选，官方文档已经贴出了代码，我这里也不作过多解释，只是分享给你们一个小功能

通常在单选或者多选时，都会出现“其余”这个选项，若是经过input焦点事件、失焦事件来控制，代码会很繁琐

这里能够用到“for”来绑定“id”

<radio id="item1"  style="display:none"/>
<label for='item1' class='other clearfix'>
      <text>其余：</text>
      <input placeholder='请填写'></input>
</label>

也就是说，其实这个“其余”仍是一个单选项，只不过与label绑定在一块儿，点击“其余”时，就至关于点击了被隐藏的radio。

当前单选项完整的代码：

<view class="section">
    <view class="section__title">一、问题</view>
    <radio-group name="group1" >
      <label class='radio-group-row'>
        <radio  value="回答1" color="#ffffff"/>回答1
      </label>
      <label class='radio-group-row'>
        <radio  value="回答2" color="#ffffff"/>回答2
      </label>
      <label class='radio-group-row'>
        <radio  value="回答3" color="#ffffff"/>回答3
      </label>
      <label class='radio-group-row'>
        <radio id="item1" style='display:none'/>
        <label for='item1' class='other clearfix'>
          <text>其余：</text>
          <input placeholder='请填写' ></input>
        </label>
      </label>
    </radio-group>
  </view>

 

 

改变radio原生样式：

/*  重写 radio 样式  */
/* 未选中的 背景样式 */
radio .wx-radio-input{
  border-radius: 50rpx;
  height: 28rpx;
  width: 28rpx;
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求本身修改） */
radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 50rpx;/* 圆角 */
   height: 28rpx;
   width:28rpx;
   line-height: 28rpx;
   text-align: center;
   color:#4F96FF; /* 对勾颜色 白色 */
   background: #ffffff;
   font-size: 20rpx;
   margin:0;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}