微信小程序——单选项

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

一般在单选或者多选时，都会出现“其他”这个选项，如果通过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">1、问题</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:;

   transform:translate(-50%, -50%) scale(1);

   -webkit-transform:translate(-50%, -50%) scale(1);

}