如何通过“按钮”实现“收音机”答案

【问题标题】：How to achieve "radio" by "button"如何通过“按钮”实现“收音机”
【发布时间】：2015-06-08 19:42:13
【问题描述】：

我想要收音机功能（M 或 F）。

但我不能使用它。（达不到我想要的风格）

<input type="radio" id="Member_Sex_boy" class="btn btn-default" onclick="ChangeColor_boy();" name="Member_Sex" VALUE="1" CHECKED >MAN</input>

图片是使用<input type="radio"...

https://goo.gl/RCaMgP

但我想要图片。（使用<button type="radio"... 或<label type="radio"...）

https://goo.gl/37FzCF

但是，如果是<button type="radio"...：当我按下收音机时，它会自动提交表单。

而且，如果是<label type="radio"...：当我按下提交按钮时，它无法向数据库发送数据。

所以我想用button实现radio。

（例如<button type="button"... 可以广播项目）

（抱歉，我不能发图。）

【问题讨论】：

您将不得不使用像 Bootstrap 这样的库，或者自定义您自己的按钮，这些按钮要么绑定到单选按钮，要么只是像它们一样工作。原生单选按钮看起来不像那样。
你可能想看看类似的东西：jqueryui.com/button/#radio
我用Bootstrap写程序(class="btn btn-default")~但是我想知道怎么用javascript实现单选按钮~

标签： javascript html forms button radio-button

【解决方案1】：

这可以只使用 css 来完成，只是需要一点创造力；）

input[name='sex'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: none;
  border: none;
  outline: none;
}
input[name='sex']:after {
  display: inline-block;
  text-align: center;
  content: attr(value);
  padding: 10px 0;
  width: 40px;
  border: solid 1px;
  border-radius: 5px;
}
input[name='sex']:checked:after {
  background: #000;
  color: #fff;
}

<input type="radio" name="sex" value="f" checked />
<input type="radio" name="sex" value="m" />

【讨论】：

如果由于某种原因 OP 不能使用伪类，这里是 javascript：jsfiddle.net/snlacks/6m0s8x51

【解决方案2】：

抱歉，没有花时间在这里编写代码，但希望这将指导您了解您需要查找的内容。

您可以通过阻止点击事件传播来阻止点击按钮时发生的表单提交。

对于充当单选按钮的按钮，请保留一个隐藏的表单字段，您可以根据单击的按钮将其值更新为 M 或 F。提交表单时，该值会自动与其他表单数据一起发送。

再次加载表单时，检查此隐藏字段的值，并相应地使用 css 更新按钮的显示。

简而言之，这将是一种使用不同 UI 元素和 javascript 来复制 html 表单元素所做工作的方法。

这是更长的路线。更短的路线是使用某种 UI 库来覆盖底层表单元素以增强外观。以 jquery mobile 为例。

【讨论】：