如何在不提交表单的情况下使用单选类型作为按钮？答案

【问题标题】：How to use radio type as button without submit form?如何在不提交表单的情况下使用单选类型作为按钮？
【发布时间】：2021-12-26 23:54:12
【问题描述】：

我在表单上使用单选按钮：

<div class="d-block">
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="radio" name="type" value="rent" style="padding-right: 0 !important;" class="btn btn-lg btn-secondary pr-4 pl-0 active" id="left">{{ __('Rent') }}</button>
    <button type="radio" name="type" value="buy" style="padding-right: 0 !important;" class="btn btn-lg btn-light pr-4 pl-0" id="right">{{ __('Sale') }}</button>
  </div>
</div>

如何在没有提交表单的情况下在租和购买按钮之间切换？

【问题讨论】：

HTML 无效。按钮不能有收音机类型。因此它将默认为按钮的默认类型，提交。

标签： javascript html bootstrap-4

【解决方案1】：

应该是input 而不是button

<div class="d-block">
  <div class="btn-group" role="group" aria-label="Basic example">
    <input type="radio" name="type" value="rent" style="padding-right: 0 !important;" class="btn btn-lg btn-secondary pr-4 pl-0 active" id="left">{{ __('Rent') }}</input>
    <input type="radio" name="type" value="buy" style="padding-right: 0 !important;" class="btn btn-lg btn-light pr-4 pl-0" id="right">{{ __('Sale') }}</input>
  </div>
</div>

【讨论】：