使单选按钮可“勾选”:HTML

3

如何使单选按钮更像复选框?我需要单选按钮的功能,但它需要能够被取消选择。


你需要同时选择多个复选框吗? - toddk
2
您可能希望在此单选按钮所处的上下文中包含一些信息。它是HTML?WinForms?Swing? - Adam Crossland
告诉大家你的平台和/或编程环境可能会有所帮助... - Justin Ethier
你应该确认你所说的环境是什么。我猜你指的是HTML,但这个问题可能涉及到其他任何东西。在Adobe Flex中,我们可以轻松地使用复选框并告诉它使用单选按钮皮肤。不过我确定你不是在谈论Flex。 - Samuel Neff
1
@MYYN,选中复选框时不会排除其他选项,对吧? @Adam,HTML。 - Kevin Brown
显示剩余2条评论
4个回答

12

通常,这可以通过添加另一个选项“无”来实现。用户不会期望点击已经选择的单选按钮会取消选择,因为这不是正常的行为。

另一个选项,虽然不再经常使用,但是是一个“清除”按钮。不过我不喜欢这个选项。


4
不要改变基本表单元素的基本行为,这会极大地困惑用户。+1 - Pekka

3
您可以创建一个“无”选项,或者创建一个JavaScript按钮来取消选择每个单选按钮。我想知道如果单选按钮已经被选中,它的onclick事件是否会触发...

2
您可以为每个单选按钮添加一个onClick函数,如果在已选择的情况下单击它,则会取消选择它(尚未尝试过,但似乎合理)。但对于大多数用户来说,这确实是意外的行为 - 我认为其他建议添加“无”选项的答案更好。
编辑:只是为了好玩,我试过了。它有效。我的代码相当俗气 - 只是为了快速测试。
<script>
  var x = false;
</script>

<input type="radio" value="test 1" name="1" onmousedown="if (this.checked) { x = true; }" onclick="if (x) {this.checked = false; x = false; return true;}" />1
<input type="radio" value="test 2" name="1" onmousedown="if (this.checked) { x = true; }" onclick="if (x) {this.checked = false; x = false; return true;}" />2
<input type="radio" value="test 3" name="1" onmousedown="if (this.checked) { x = true; }" onclick="if (x) {this.checked = false; x = false; return true;}" />3

1

你可以像其他人建议的那样使用 "none" 选项。如果这不可接受,你的其他选择是:

  1. 带有逻辑的复选框,只允许选择一个。
  2. 只允许单个选择的列表框。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接