Question

我想我想尝试制作单选按钮，除了HTML / Cordova中的实际按钮。

我的应用程序会有几个问题，下面有按钮可以获得答案。当用户按下某个问题的按钮时，我希望它突出显示该按钮以指示锁定的内容，并且不会突出显示该问题的任何先前答案（同时不影响其他问题的任何按钮）。

有一种有效的方法吗？将图像水平对齐的单选按钮是最佳方式吗？或者是否有某种标准方法可以使用简单的HTML按钮执行此操作？

Answer 1

您可以使用label标记执行此操作。

例如：

HTML：

<form>
  <input type="radio" name="radio" id="radio1" value="radio1" />
  <label for="radio1"></label>
  <input type="radio" name="radio" id="radio2" value="radio2" />
  <label for="radio2"></label>
</form>

CSS：

label { 
    display: inline-block;
    width:30px; height:30px;
    margin: 0 20px;
    background-color: red; }

input { display: none; }

input:checked + label { background-color: green; }

在这里工作小提琴：http://jsfiddle.net/bK73E/

您可以在标签上设置任何背景图像和属性，使其看起来像您想要的那样。

Answer 2

那就是单选按钮的功能！如果您使用此：<input type="radio" name="thisquest" value="" /><input type="radio" name="thisquest" value="" />
否则，如果你做了类似的事情！

<input type="radio" name="male" value="male"/><input type="radio" name="female" value="female" />

它们不匹配，两者都会被检查！

没有垂直的会更好！另外，如果你想向他们展示一些图片，那就更好了！

有没有办法只允许选择一个按钮中的一个按钮？

2 个答案: