小程序 模拟实现 单选 多选功能，自定义样式自定义单选 输入框

自定义单选 输入框

网上有很多这方面的例子，但是—他们大多都是，用wx:for = "{{}}"去循环遍历的，

但是在实际的开发中有时候，不光只是选择，就比如我的需求，

前面四个是选择框，

最后一个是 点击之后变成输入框，

得一个一个写的话，

废话说完了，开始正文
index.wxml

<form bindsubmit="formSubmit">
  <view class="checkbox-con">
    <radio-group bindchange="radioChange">
      <label class="checkbox {{checkValue == '40-60' ? 'checked':''}}">
        <checkbox value="40-60"></checkbox>
        <text> 40-60 </text>
        <text> ㎡ </text>
      </label>
      <label class="checkbox {{checkValue == '60-90' ? 'checked':''}}">
        <checkbox value="60-90"></checkbox>
        <text> 60-90 </text>
        <text> ㎡ </text>
      </label>
      <label class="checkbox {{checkValue == '120-150' ? 'checked':''}}">
        <checkbox value="120-150"></checkbox>
        <text> 120-150 </text>
        <text> ㎡ </text>
      </label>
      <label class="checkbox {{checkValue == '150-180' ? 'checked':''}}">
        <checkbox value="150-180"></checkbox>
        <text>150-180 </text>
        <text> ㎡ </text>
      </label>
      <label class="checkbox {{checkValue == '其他' ? 'checked':''}}">
        <checkbox value="其他"></checkbox>
        <view wx:if="{{areaInfo}}" bindtap="areaTap">
          <text>其他面积</text>
        </view>
        <view wx:else>
          <input type="number" name="input_area" focus="{{focusInfo}}" placeholder-class="areaInputClass" placeholder="输入面积"></input>
        </view>
      </label>
    </radio-group>
    <button form-type="submit">提交</button>
  </view>
</form>

index.wxss

.checkbox-con {
  margin: 30rpx 40rpx 40rpx 40rpx;
}

.checkbox-con .checkbox {
  text-align: center;
}

.checkbox {
  width: 260rpx;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 28rpx;
  color: #888;
  border: 1rpx solid #cecece;
  border-radius: 5rpx;
  display: inline-block;
  margin: 10rpx;
  margin-right: 60rpx;
  position: relative;
}

.checked {
  color: #eb6100;
  border: 1rpx solid #eb6100;
  box-shadow: 0px 2px 4px 2px #f89651;
}

.checked .areaInputClass {
  color: #eb6100;
}

.checkbox input {
  height: 72rpx;
  line-height: 72rpx;
}

.checkbox checkbox {
  display: none;
}

button {
  margin: 50rpx 0;
  background: #eb6100;
  width: 96%;
  color: #fff;
}

.button-hover {
  color: rgba(0, 0, 0, 0.6);
  background-color: #dedede;
}

index.js

Page({
  data: {
    areaInfo: true,
  },
  // 获取点击的当前value值
  radioChange: function (e) {
    var checkValue = e.detail.value;
    console.log("当前value值-->",e.detail.value)
    this.setData({
      checkValue: checkValue
    });
  },
  // 点击 其他，影藏其他，显示输入框,  并且聚焦
  areaTap: function () {
    this.setData({
      areaInfo: false,
      focusInfo: true, //聚焦
    })
  },
  // from表单提交之后里面的数据
  formSubmit: function (e) {
    console.log('输入框的数据 -->', e.detail.value)
    console.log("选择的数据 -->", this.data.checkValue)
    this.setData({
      other_orea: e.detail.value,
      checkValue: this.data.checkValue
    })
  },
})

电脑没装录屏工具，所以我多放几张图片