不可选中的单选按钮与排他性复选框

从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>

我应该包括一个额外的控件来取消选中"主要"，还是只是扩展复选框或单选按钮的功能？

如果您认为额外的单选按钮，它会在标题中放在哪里？

顺便说一句，看起来无论如何都需要JavaScript来使RadioButtons在GridView中工作，因为 ASP.Net 修改了GroupName。

更新 2：

另请参阅 ASP.NET AJAX 扩展器互斥复选框

一定要使用单选按钮，因为它们是为此目的而设计的。为什么要将用户与复选框混淆，并通过编写代码来维护独占行为来进一步麻烦自己？

虽然我不同意更改radio和checkbox控件的预期功能，但我有需要这样做的情况。

如果你使用Javascript这样做，如果你的用户禁用了JS，它将非常失败。

appearance CSS 属性是你的朋友。

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

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

就像其他人说的那样，你不应该改变原生表单元素的预期行为。我会使用一组单选按钮，并包含一个用于"清除选择"的按钮。这清楚地表明选择是可清除的，并提供了一种明显的方法。

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

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

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

相关内容

最新更新

热门标签：