不可选中的 RadioButtons 与独占的 Checkboxes答案

【问题标题】：uncheckable RadioButtons vs exclusive Checkboxes不可选中的 RadioButtons 与独占的 Checkboxes
【发布时间】：2011-08-29 01:01:09
【问题描述】：

从 UI 的角度来看，是拥有一组具有取消选中功能的 RadioButton 更好，还是拥有一组独有的 CheckBox，这意味着一次只能选中一个？

更新：

我没想到会有这样的负面反应。如果我举一个更接近它的使用方式的例子，也许会有所帮助。

我有一个充满数据绑定内容的 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 会在标题中出现在哪里？

顺便说一句，看起来需要 JavaScript 才能让 RadioButtons 在 GridView 中正常工作，因为 ASP.Net 修改了 GroupName。

更新 2：

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

【问题讨论】：

颠倒这两个元素的功能有什么意义？它们有非常具体的用法，你可能会通过改变它来混淆人们。我要说的是，两者都是“不好的做法”。
您的示例首先在控件的选择方面存在一些问题 - 您是否熟悉 <label> 元素和 for="" 属性，或者您的示例是否只是为了速度而忽略了它们？
我认为共识非常明确，您应该保持单选按钮功能不变 - 或者更确切地说，您不应该依赖用户发现他们可以做一些非标准的事情来完成它.在您的示例中，与其说功能有害，不如说它是不可发现的。
这是您的示例的修改版本，带有“不适用”选项，以及一些柔和的样式以突出两组之间的差异。 jsfiddle.net/5fN2J/7

标签： asp.net html gridview user-interface

【解决方案1】：

正如其他人所说，您不应该更改原生表单元素的预期行为。我会使用一组单选按钮，并包括一个用于“清除选择”的按钮。这清楚地表明选择是可清除的，并提供了一种明显的方法。

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

虽然我不同意更改 radio 和 checkbox 控件的预期功能，但我遇到了需要更改的情况。

如果您使用 Javascript 执行此操作，如果您的用户禁用了 JS，它将会非常失败。

appearance CSS 属性是你的朋友。

【讨论】：

【解决方案4】：

一定要使用单选按钮，因为它们就是为此目的。为什么要用复选框来混淆用户，并通过编写代码来维护排他行为来进一步困扰自己？

【讨论】：

RadioButtons 的问题是不能取消选中是不正常的，所以用户可能不知道他们有这个选项。使用 CheckBoxes，取消选中是一种预期行为。
我个人也会坚持使用单选按钮。也许您可以为用户添加说明，告诉他们如果他们不想回答问题并且已单击单选按钮，请再次单击以删除选择。
另外，在这两种情况下你都会有代码。对于 CheckBoxes，它必须取消选中其他 CheckBoxes。对于 RadioButtons，它必须取消选中自身。
@Homer：我建议使用一个额外的单选按钮来表示“未选中”，例如“N/A”或“以上都不是”。