不可勾选的单选按钮与独有的复选框

Question

从 UI 角度来看，是拥有一组具有取消选中功能的单选按钮更好，还是拥有一组独占的复选框（意味着一次只能选中一个）更好？

更新：

我没想到会有如此负面的反应。如果我给出一个更接近其使用方式的示例，也许会有所帮助。

我有一个充满数据绑定内容的 GridView。用户可以选择其中一行作为“主要”行，但这不是必需的。新的例子：

$(":radio").click(function() {
    if (this.previous) {
        this.checked = false;
    }
    this.previous = this.checked;
});

$(":checkbox").click(function() {
    $(":checkbox").not(this).prop("checked", false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Choose a primary city and state (if applicable).<br />
<table><tr><td>
<table border="1" >
<tr><td>Primary</td><td>City</td><td>State</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Pahokee</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palatka</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palm Bay</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palm Beach Gardens</td><td>Flordia</td></tr></table></td><td>&nbsp;&nbsp;&nbsp;</td><td><table border="1" >
<tr><td>Primary</td><td>City</td><td>State</td></tr>
<tr><td><input type="checkbox" /></td><td>Pahokee</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palatka</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palm Bay</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palm Beach Gardens</td><td>Flordia</td></tr>
</table></td><tr>
</table>

我应该包含一个额外的控件来取消选中“主要”，还是只是扩展 CheckBox 或 RadioButton 的功能？

如果您想到额外的 RadioButton，那么它会放在标题中的哪里？

顺便说一句，由于 ASP.Net 修改了 GroupName，因此看起来需要 JavaScript 才能使 RadioButtons 在 GridView 中工作。

更新 2：

另外，请参阅 ASP.NET AJAX 扩展器 MutuallyExclusiveCheckBox

Answer 1

一定要使用单选按钮，因为它们就是用于此目的的。为什么要让用户对复选框感到困惑，并通过编写代码来维护独占行为进一步给自己带来麻烦呢？

Answer 2

尽管我不同意更改 radio 和 checkbox 控件的预期功能，但我也遇到过需要这样做的情况。

如果您使用 Javascript 执行此操作，并且您的用户禁用了 JS，那么它将会严重失败。

appearance CSS 属性是您的朋友。

Answer 3

如果用户只能从一组选项中选择一个，请使用单选按钮。如果用户可以选择任意数量的选项，请使用复选框。请注意，“只有一个选择”的定义可以包括一个显示“无”的单选按钮。

自从 GUI 发明以来，这几乎成为每个平台上的标准。偏离这种做法只会让您的用户感到困惑。

Answer 4

正如其他人所说，您不应该更改本机表单元素的预期行为。我将使用一组单选按钮，并包含一个用于“清除选择”的按钮。这明确表明选择是可清除的，并提供了一种明显的方法来做到这一点。

另一种方法是“发明”一种新型控件 - 可能基于隐藏的单选按钮，也许看起来像一组“切换”。不过，这是一个非常直观的解决方案，并且依赖于 javascript，因此它可能不是最可靠的选择。

这是两种解决方案的示例：
http://www.spookandpuff.com/examples/clearableOptions.html

目前，这两种解决方案依赖 javascript - 通过让清除按钮将表单提供给服务器，并使用清除的单选按钮集进行响应，您可以轻松地为第一个选项提供无 JS 的后备。