Question

我希望有一个广播功能（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"...：当我按下提交按钮时，它无法发送数据库数据。

所以我想用radio实现button。

（EX。<button type="button"...，它可以收音机项目）

（抱歉，我无法发布图片。）

Answer 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" />

Answer 2

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

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

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

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

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

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

如何实现＆＃34; radio＆＃34;通过＆＃34;按钮＆＃34;

2 个答案: