logo标签列表

无法取消选择的单选按钮与互斥复选框

asp.nethtmlgridviewuser-interface
3

从用户界面的角度来看，使用具有取消选中功能的一组单选按钮是否比使用一组互斥复选框更好？

更新：

我没有预料到会有这样的负面反应。也许如果我给出一个更接近实际使用情况的例子会更有帮助。

我有一个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 才能使 GridView 中的 RadioButtons 工作。

更新2：

另请参见 ASP.NET AJAX 扩展程序 MutuallyExclusiveCheckBox

颠倒这两个元素的功能有什么意义呢？它们具有相当特定的用途，如果改变它们的功能，很可能会让人们感到困惑。我认为这两种做法都是同样的“不良实践”。 - drudge
你的示例在首次选择控件方面存在一些问题 - 你是否熟悉<label>元素和for = ""属性，或者你的示例只是为了速度而省略它们？ - Ben Hull
1
我认为共识非常清楚，即您应该保持单选按钮功能不变 - 或者说，您不应该依赖用户发现他们可以执行某些非标准操作来完成它。在您的示例中，问题并不在于功能有害，而是无法被发现。 - Ben Hull
1
这是您示例的修改版本，包括“不适用”选项，并进行了一些温和的样式设置以突出显示两个集合之间的差异。http://jsfiddle.net/5fN2J/7/ - Ben Hull
4个回答
2

一定要使用单选按钮，因为它们是为此目的而设计的。使用复选框会让用户感到困惑，并进一步增加编写代码以维护独占行为的麻烦。

1
RadioButton的问题在于通常情况下无法取消选择，因此用户可能不知道他们有这个选项。而对于CheckBoxes来说，取消选择是一种预期行为。 - Homer
我个人也会坚持使用单选按钮。也许您可以为用户添加说明，告诉他们如果不想回答问题并且已经点击了单选按钮，则再次点击以取消选择。 - m4tt1mus
此外，在两种情况下都需要编写代码。对于复选框，它必须取消选中其他复选框。对于单选按钮，它必须取消自身的选中状态。 - Homer
2
@Homer：我建议使用另一个单选按钮来表示“未选中”，例如“N/A”或“以上都不是”。 - casablanca
0

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

如果你使用 Javascript 来做这个，如果用户禁用了 JS，它将会失败得非常惨。

appearance CSS 属性是你的好帮手。

0

就像其他人所说的那样，您不应更改本机表单元素的预期行为。我会使用一组单选按钮，并包括一个“清除选择”按钮。这使得选择是可清除的，并提供了一个明显的方法来完成它。

另一种方法是“发明”一种新类型的控件 - 可能基于隐藏的单选按钮，可能看起来像一组“切换”开关。虽然这是一个非常视觉化的解决方案，但它依赖于JavaScript，因此可能不是最可靠的选择。

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

这两种解决方案目前都依赖于JavaScript - 您可以通过使清除按钮将表单提交到服务器并响应已清除的单选按钮集来轻松地为第一种选项提供无JS回退。

0

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

自GUI问世以来，这一标准在几乎所有平台上都得到了应用。偏离这种做法只会让您的用户感到困惑。

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