JS实现radio单选的同时，可以自定义输入值

效果图：

css

.radio {
            background-color: white;
            border-color: gray;
            color: gray;
            border-style: solid;
            border-width: thin;
            text-align: center;
            vertical-align: middle;
            border-radius: 3px;
            padding-top: 50px;
            padding-bottom: 50px;
            width: 300px;
            margin: 30px;
            font-size: large;
            cursor: pointer;
        }
        
        .click-radio{
            background-color: lightskyblue;
            border-color: white;
            color: white;
            border-style: solid;
            border-width: thin;
            text-align: center;
            vertical-align: middle;
            border-radius: 3px;
            width: 300px;
            padding-top: 50px;
            padding-bottom: 50px;
            margin: 30px;
            font-size: large;
        }
        input[type = "radio"] {
            display: none;
        }

HTML:

<form action="alipay/inde
x.php" id="form" method="post">
  <div class="row form-group">
      <label for="coin30000">
          <input type="radio" name="coin" id="coin30000" value="30000" checked="checked"><span class="radio click-radio">30000枚</span>
      </label>
      <label for="coin10000">
          <input type="radio" name="coin" id="coin10000" value="10000"><span class="radio">10000枚</span>
      </label>
      <label for="coin5000">
          <input type="radio" name="coin" id="coin5000" value="5000"><span class="radio">5000枚</span>
      </label>
  </div>
  <div class="row form-group">
      <label for="coin2000">
          <input type="radio" name="coin" id="coin2000" value="2000"><span class="radio">2000枚</span>
      </label>
      <label for="coin1000">
          <input type="radio" name="coin" id="coin1000" value="1000"><span class="radio">1000枚</span>
      </label>
      <label for="coin500">
          <input type="radio" name="coin" id="coin500" value="500"><span class="radio">500枚</span>
      </label>
  </div>
  <div class="row form-group">
      <label for="coin200">
          <input type="radio" name="coin" id="coin200" value="200"><span class="radio">200枚</span>
      </label>
      <label for="coin100">
          <input type="radio" name="coin" id="coin100" value="100"><span class="radio">100枚</span>
      </label>
      <label for="other">
          <input type="radio" name="coin" id="other" value="-1"><span class="radio">其他金额</span>
      </label>
  </div>
  <div class="row">
      <div class="form-group">
          <div class="col-sm-11" style="display: none" id="disp">
              <input type="text" class="form-control" id="coinother" name="coinother"
                     placeholder="请输入其他整数金额" onkeyup="this.value=this.value.replace(/\D/g,'')"
                     onafterpaste="this.value=this.value.replace(/\D/g,'')"
                     onkeyup="this.value=this.value.replace(/\D/g,'')"
                     onafterpaste="this.value=this.value.replace(/\D/g,'')">
          </div>
      </div>
  </div>
  <div class="row form-group">
      <div class="col-sm-11">
          <hr>
      </div>
  </div>
  <div class="row form-group">
      <div class="col-sm-11">
          <input type="button" class="form-control btn btn-default" id="btn" value="购买" onclick="ck()" style="border-color: #0d71bb" >
      </div>
  </div>
</form>

JS:

$(".radio").click(function(){
    $("#disp").hide();
    $(".click-radio").removeClass('click-radio');
    $(this).addClass('click-radio');
});

$("#other").click(function () {
    $("#disp").show();
    $("#coinother").focus();
});