對於小程序單選，官方文檔已經貼出了代碼，我這裏也不作過多解釋，只是分享給你們一個小功能

通常在單選或者多選時，都會出現「其餘」這個選項，若是經過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);
}