有一个伪类选择器,:indeterminate,它的作用是选择既未选中(具有属性“checked”)也未取消选中(没有)的单选按钮输入。这是一个 CSS3 选择器,可能是对 HTML5 规范 的响应,该规范明确允许单选按钮处于这种状态
如果单选按钮组中的任何单选按钮在插入文档时都没有被选中,那么它们在界面中将最初都未被选中,直到它们中的一个被选中(由用户或脚本)。
这一切有什么意义? 好吧……为什么明确允许这种糟糕的 UI?

没有选择
在上一周的评论中,Lee Kowalkowski 对此进行了很好的总结
在我看来,这是糟糕的 UI。最受欢迎的选项应该被选中。如果选择不选择是有效的,那么单选按钮组不适合,因为用户无法轻松地将组恢复到其不确定的状态。
值得重复:用户无法轻松地将组恢复到其不确定的状态。
HTML4 规范 更有意义
始终,单选按钮集中只有一个单选按钮被选中。如果单选按钮集中的 <INPUT> 元素没有一个指定 ‘CHECKED’,那么用户代理必须最初选中该集中第一个单选按钮。
由于用户代理行为不同,作者应该确保在每个单选按钮集中最初都“打开”一个。
那里的第二部分,用简单的英语来说:由于我们知道没有浏览器真正遵循这一规范,因此我们添加了这个特殊的说明来提醒作者将其掌握在自己手中。
在我看来,我们应该恢复到 HTML4 规范,但浏览器应该实际尊重它,通过强制在任何时候至少一个单选按钮被选中(每个组)。这样一来,:indeterminate 伪类就没什么用了。
请记住,单选按钮和下拉列表本质上是相同的(只能从多个选项中选择一个)。所以,如果您需要“未选中”状态,也许 <select> 带有“选择”的默认选项可以为您解决问题。
… 或者“未指定”
“如果您需要“未选中”状态,也许 <select> 带有“选择”的默认选项可以为您解决问题”
IMHO,我认为这也是一种糟糕的方法 - 它不是该集中其他元素的同级元素(它是一个指令,是表单的“元”部分,而不是值 - 您没有“选择”的性别或居住在“选择”的状态)。如果它看起来像一个单选按钮是错误的(“选择”肯定是这样),那么它作为选择选项也是错误的。
‘无’、‘未知’或类似的选项将是标准的统一解决方案。
当然,您选择的词语是可争议的,但至少您可以将下拉列表移回没有选择任何内容的状态。或者更准确地说,有一个选项被选中,但在处理时您将其视为没有选项。
我当然同意主要观点,即不确定的单选按钮是损坏的单选按钮,允许它的规范也是损坏的。与其允许不确定的状态被重新选中,不如根本不出现它。如果‘不确定’是一种状态,那么它应该是确定性的 :)
或者使用带有 javascript(读取 jQuery)的复选框来确保只有一个复选框被选中。
复选框*
我不同意。复选框不是用来替代单选按钮的……恕我直言,这更糟糕的 UI。
鲜为人知的争论,继续关注评论!
Chris - 我不明白你为什么说下拉列表和单选按钮在本质上是相同的,因为两者你只能选择一个选项。
下拉列表可以允许进行多项选择:http://www.w3.org/TR/html401/interact/forms.html#adef-multiple
我敢肯定你知道我的意思。当它不是专门的多项选择下拉列表时。
我认为 shoutyman 说到了点子上。如果‘选择’在提交表单时不是一个可接受的选项,那么它就不应该出现在下拉列表中。
当您需要做出选择时,使用单选按钮可以让您不默认选择任何内容,但仍然可以清楚地表明必须选择某项内容。
它们无法返回到没有选择任何内容的状态 - 这是因为设计如此。故意没有空性别选项。必须选择某项内容,因此让用户回到没有选择任何内容的状态毫无意义。
相关场景:我的父亲刚接触网络。前几天,他遇到一个问题,有人网页崩溃,在他完成注册他们的服务之前。因为他没有完成注册,但又登录了,所以使用了一些默认值。它选择了他的性别为‘女性’。
我父亲非常生气。我花了大约一个小时才让他明白这并不是针对他个人攻击,而仅仅是系统中一个简单的默认值,他可以随时更改。
奇怪的是,我和我的父亲也发生过类似的事情。他刚接触网络,我让他独自填写一份在线保险单。由于打字速度很慢,他的表单在完成之前超时了,当他点击提交时,表单将他锁定在所有默认选项上。
至少这样做的一个好处是,如果默认状态为‘中性’,那么表单验证会更容易,这样就不会发生这种事情?
实际上,我宁愿不希望服务器端会话毫无必要地过期。从实际意义上讲,您根本没有服务器端会话状态。
没有理由不能将到目前为止提交的内容从页面传递到页面,同时保持未提交状态,直到进行完整的事务。
快速提问
您将如何默认选择您在开头给出的示例?
有些人可能会因为您自动为他们选择性别而感到反感。
*(我并不是在争论他们是对还是错,我只是认识一些生活在持续愚蠢状态中的人)
我个人会做一个有三个选项的下拉列表。选择性别、男性和女性。
对于像这样的事情,我非常喜欢使用 OPTGROUP - 我只是希望浏览器默认使用该值而不是列出的第一个选项。
OPTGROUP 是一个不错的选择,但对于可访问性来说确实很困难。如果你有机会,试着坐下来用屏幕阅读器读一个使用 OPTGROUP 的页面。这相当糟糕
这也是我的第一个想法。但性别选择是少数几个适用此规则的例子之一。例如,信用卡的选择。没有人会因为这个感到反感。
您可以使用链接/按钮在向导式流程中,或者使用复选框,并将两个都选中视为无效状态(如果您真的想忽略属于该组的人)。
如果暂时不考虑 HTML 仅讨论 UI,我不确定我是否同意在所有情况下设置默认值。在一个大型表单中,为所有事项选择默认值的问题在于,应用程序无法确定用户跳过了该字段还是仅仅想要默认值。
我认为智能默认值是一件好事,不要误会我的意思,但这并不适用于所有情况。我举个例子。在一个我参与开发的抵押贷款申请中,有一系列是/否问题。我们可以为它们设置默认值,甚至有一个按钮用于将它们设置为“典型响应”,但我们希望能够警告用户,如果他们从未真正设置过这些值。使用我们的应用程序,您可以按任何顺序填写数据,并稍后返回查看。对于用户来说,了解他们实际接触过应用程序的哪个部分非常有用。
我认为这是一个很好的观点。
应该更加明确的一点是,是“必需”还是“非必需”。如果单选按钮组是“必需”的,那么没有默认选项是可以的,因为用户会受到提示来选择一个。但是,将字段标记为“必需”通常需要在服务器端处理或客户端 JavaScript 中进行。
尽管如此……HTML5 现在有了一个用于必需输入的属性。我相信这一点将对它产生重大影响。
然而,我几乎觉得单选按钮应该始终是“必需”的。如果它们是可选的,那么不确定的状态将是“不选择”的唯一可能性,而我们知道一旦选择了某个选项,就无法再回到该状态。
虽然所有这些论点都有道理,但我必须坚定地站在 UX 工程与技术方面。表单是应用程序中非常交互式的元素,您必须对您的受众非常敏感。
简单地说所有单选按钮都必须是“必需”的,这是不正确的。简单地说,在单选按钮上始终设置一个默认值也是不正确的。
将问题置于上下文中,考虑一下该问题的价值。设置默认值会让表单更容易,还是会冒犯用户?有人选择该选项的动作是否比快速引导用户完成表单更重要?
我认为在本文中使用男性/女性选项非常出色。在构建表单时,这些信息的价值是什么?我填写过很多问这个问题的表单,很多时候其目的纯粹是营销,这令许多人感到非常沮丧。为什么 Facebook 在我最初注册时需要知道这一点,而当我注册医疗服务时则不需要?明白我的意思了吗?
默认值和标准是不错的“指南”,但作为一名优秀的开发人员,我们需要在设置一堆任意的技术限制之前,对内容、上下文和用例保持敏感。
这就是我的 0.02 美元。
在某些情况下,处于初始不确定状态是有意义的。如果您试图收集有关网站访问者的准确统计信息,那么预先选择最受欢迎的选项肯定不是正确的方法。许多人不喜欢成为“边缘案例用户”,他们往往会认为预先选择的答案是他们应该选择的答案。
我无法想象在什么情况下我会想让用户选择回到未选择状态。如果某个问题不适用,那么应该为用户提供一个明确的选项来选择。
…那么那个明确的选项也应该是默认选项,不是吗?
拥有这样的非选择选项会迫使用户做出选择。如果选择任何选项都没有意义,那么就由开发人员来验证并向用户反馈。这将迫使用户真正回答问题,而如果默认选择的是“男性”选项,而女性用户错过了这个问题,那么您的数据就会不正确。
嗯,我同意——我一直在考虑我之前关于损坏的陈述是否完全公平(不是),并得出了相同的结论:在某些情况下,默认选择不明智,而且“无值”也不合适。
通常,当您使用单选按钮时,您需要有答案,否则用户将无法继续填写表单,因为表单的其余部分会对该值做出反应。
例如(性别:男性或女性)表单中的其余问题可能会根据他们选择的性别而改变。)
如果您愿意,您可以为他们提供第三个选择,就像 Shoutyman 说的那样,它可以是“无响应”。
Russell 提出了一条很好的建议,但就像 Chris 说的那样,您需要其他处理(例如 JavaScript)来通知用户该字段未填写。我认为,如果这将成为“行业标准”,那么应该添加 JavaScript 或服务器端处理来删除默认选项,而不是默认情况下没有选择。
在我看来,评论中表达的观点是为什么我们有时会作为设计师(作者、开发人员等)失败的原因。为什么我们使用术语 UI“用户”“界面”,但在这种情况下却似乎忽略了用户。在某些情况下,需要使用未选中的单选按钮。上面的例子“男性和女性”就是其中之一。
在我使用单选按钮的每个案例中,都需要选择。在上面的案例中,您可以添加第三个选择,并将其标记为“不愿透露”或类似的文字。
我只是从用户的角度来说话,他们不想被网站预先选择。一些访问您网站的女性,如果网站为她们选择了“男性”,而她们必须选择“女性”而不是“男性”,可能会直接点击“后退”。只是一个想法。
我不知道是否喜欢强迫至少选中一个单选按钮。单选按钮的主要特点是它们一次只能选择一个。如果用户需要,您应该验证他们是否选择了一个。例如:css-tricks 目前的每月问题投票。(“您最喜欢的服务器端语言是什么?”)
这是另一个需要选择的例子。当单选按钮组是“必需”时,没有默认选项是可以的。
但是,当它们“非必需”时,事情就会变得棘手。假设用户面临着“男性/女性”的选择。他们点击“男性”,然后决定实际上不想回答这个问题。没有办法“取消选中”“男性”,因此,这是一个糟糕的 UI。
正如上面有人提到的,手动添加第三个选择“无回答”可能是最佳/唯一方法。
我相信这是一个非常好的 UI。
单选按钮的目的是“强迫”用户选择一个选项。在单选按钮组中,始终会选中一个选项(即使它是空的、无用的或无效的)。
我一直认为这更直观。它迫使用户停下来选择,而不是“哦,太好了,网站帮我选了,就忽略吧”。
单选按钮就是描述的:旧式收音机上的按钮。
还记得吗?如果不记得,问问周围的人。这些是用来选择发射频率频段的:AM、FM 等等。按下其中一个按钮时,另一个按钮就会弹起来。这就是选项的概念。
但是,如果您的按压力度不够,当前的按钮就不会保持按下状态,从而导致所有按钮都不按下,这就是不确定状态。
我们应该记住,模拟系统仍然是 UI 中使用概念的模型,我们应该尝试理解和与之相关联,即使现在我们有触摸屏和手势操作。
因为它们有意义,并且功能严格。一切都在自己的位置,没有任何事情会发生意外。
所有按钮都没有按下意味着收音机是静音的,即使您搞乱了音量。此外,它还可以用作放大器。
哈哈,我可以告诉你很多故事。但我太老了,需要小睡一下:)。
有趣的是,我一直不知道这一点。从现实生活中的类比来看,当你第一次购买一台老式收音机时,我相信所有按钮都不会被按下,所以你打开收音机后第一件事就是选择一个频率频段。
我想这里也适用相同的概念。如果所有按钮都没有被选中,它会“强迫”你做出选择。
完全正确。然后你微调,在相同的模拟刻度上寻找你的广播电台,它基本上是一根系在透明塑料后面的绳子上的小棍子。
就像……滑块控件一样。哈哈,永远不要再怀疑我们的技术遗产了!
但是,就这一点而言,我相信不确定实际上意味着用户还没有弄乱设置,因此这些信息有时也很有用。在验证时,首先检查是否有选项,而不必检查所有单选按钮,而是一个简单的集合值。
我的意思是
– 当您验证表单时,您会用红色标记一些错误的项目
– 然后很容易用红色标记从未“触碰”过的必需单选按钮或复选框。
或者,当用户“触碰”它时,视觉样式有多容易改变。向用户展示他们对表单所做的更改。
而且没有任何新增的类。
您仍然可以在 50 年代的餐厅和古董店找到这类按钮。我发现研究这些经典和永恒的设计很有趣,可以了解人类互动是如何运作的,以及为什么许多人可能会对新的设计(比如网站上的设计)感到舒适。
IMO,这只是网页设计中另一种情况,答案是强调的 *取决于*。
尽可能多地进行用户体验测试,以尝试找到最适合用户的解决方案,然后继续使用它。
默认情况下选中一个单选按钮并不总是好主意。有些人可能会认为它是首选/明显的选择,并因此疏远他们。
如果没有默认选择,那么
1) 它是可选的,这存在问题,因为一旦选择了一个选项,就无法取消选择。
2) 它是必需的,这预先假设您已将代码置于处理该“必需”的地方
因此,如果您想将单选按钮组保留在其不确定状态,那么它最好不是可选的,并且您最好准备好编写代码来处理必需的内容。
我敢打赌,如果默认选择一个选项,欧盟浏览器选择投票结果会非常有趣:)。
最终,这是为了标记,不是吗?那么,它好吗?是的,对于不确定的状态,您不必添加新类。
它是为了验证吗?不,因为无论如何你都要进行验证,对吧?
此单选按钮位于一组中。为一组设置默认值就像带着已经盖印的选票去投票一样。它必须处于不确定状态才能是可选的,除非它是强制性的。但即使如此,你也要进行验证,而不是建议。
IMO。
同意关于验证的说法。无论 CSS/HTML 如何,都应该始终进行客户端和服务器端验证。
如果您必须有一个默认值,那么您必须有选项卡或自动完成/组合框。归根结底,是滥用该概念的错,而不是单选按钮的三态。
它们,单选按钮,最终代表的是值。而值的正常周期是:未定义、插入/修改、验证。
至于
1) 它是可选的,这存在问题,因为一旦选择了一个选项,就无法取消选择。
您可以简单地向集合中添加一个单选按钮,添加一个额外的选项来处理这种情况。
我的英语太烂了!
嗯,我认为 Chris 提出了几个有效的观点。
如果是我,我可能只对必需字段使用具有不确定状态的单选按钮。否则,对于非必需字段,我可能使用选择字段。
我猜想对于民意调查来说,选择字段不太友好,并且会导致有偏差的结果。但是,预先选择的单选按钮也会做到这一点,因此在这种情况下只有具有不确定状态才有意义。尤其是在为了投票,必须进行选择的情况下。
对于非必需问题,应该始终保留不回答的选项。我可以想象,意外地回答一个问题而无法取消回答会非常令人沮丧。使用选择框可以轻松做到这一点。
我想这更多的是为特定任务选择合适的工具。对于必需字段,单选按钮肯定有意义。当您期望(强制)用户做出决定时。
我认为,没有默认选择的单选按钮是糟糕的用户界面的说法过于简单化了。它通常适用,但并非总是适用。无论字段是必需的还是可选的,您可能希望用户做出有意识的选择。提供具有默认选择的必需单选按钮与用户可以跳过的可选字段相同。有时您可能不希望这样。
我认为不应做出违反标准的设计选择,仅仅因为您正在测试/支持的每个浏览器都忽略了该标准。
如果用户不应受到您的默认值的引导,或者用户在稍后*更正错误很麻烦,那么请在数据捕获主体之外,为他们提供一系列链接或图标。这甚至可以与数据捕获主体结合使用,如果使用 JavaScript 进行增强。
(*对于复杂或冗长的表格,应提供一个摘要页面,供用户在提交数据之前进行查看,如果他们无法随后更改他们即将发送的内容。)
大家好。我有一个问题我一直没有弄明白。您能否在不添加 ID 或类的情况下定位单选按钮?
我之所以这么问,是因为每当我在 CSS 中为 INPUT 添加边框时,它也会在单选按钮中添加边框(在 IE 中)。因此,我必须在所有单选按钮上添加一个类,并为该类添加无边框的 CSS。一定有更好的方法,不是吗?
试试属性选择器
input[type=”radio”].
谢谢!完美!我太兴奋了;)
不客气。您可能应该考虑以下几点
– 使用 input { border: none}
– 通过类、ID 或其他方法定位需要边框的元素
从所有输入中删除边框有点危险,除非您有良好的计划。提交按钮具有默认的浏览器样式(如 Webkit 中的凝胶按钮外观),如果您删除边框,它们就会失效。因此,如果您计划用自己的按钮样式替换它,那么请继续,否则请保留这些浏览器默认设置。
谢谢 Chris。
这就是我为什么要说它必须被考虑,作为一个选择,硬币的另一面。
就像集合中添加一个新的单选按钮一样!
Chris 已经多次提到,难题之一是没有办法恢复到不确定状态。
1. 令人讨厌的表单重置按钮不是那样吗?
2. 对于那些您希望单选按钮组重置的时候,您不能在该组旁边创建一个(javascript)专用的“取消选择”按钮吗?
你刚刚说了重置按钮吗?*叹气*
:)
没有简单的方法。
1. 令人讨厌的表单重置按钮没有任何用处。如果您必须使用服务器端错误重新回显表单,重置按钮会将表单恢复到重新回显的值。
2. 如果您想依赖 JavaScript,是的。普通用户会理解这个按钮吗?可能并不重要,如果对用户来说这是一件有效的事情,您也可以将该按钮作为第一个单选按钮并将其设为默认值。如果您想让用户不要选择该选项,您的验证可以强制他们不要选择。
我正在考虑男性/女性情况,它是可选的,而“不愿透露”不适用于/不适合该表单。否则,这将是默认选项。再说一次,这是关于如何“重置”到不确定状态。
我并没有说我喜欢重置按钮。;) 它似乎是对该问题的部分解决方案。
我认为不确定状态是程序员代码中的 NULL 值(用于单选按钮组),一个尚未是任何东西的值,就像不是零,也不是空白。捕捉到这一点有助于预先验证。
您无法使用选择元素实现这一点。但是,如果您想要一个用户可以返回的中性值,可以使用它来实现。
如果您不希望选择有偏差,这很有用,谢谢!
这个帖子让我想起了 1992 年《Tog on Interface》中关于“一个或多个”选择问题讨论的内容!有趣的是,我们仍然在争论同样的问题,仍然没有好的解决方案……
HTML5 包含一个愚蠢的规范。我很震惊。
不强制选择的好理由:单选按钮常用于调查问卷。强制默认值会使结果产生偏差。强制默认值还会导致当受访者一路点击“下一步”时,出现大量不准确但技术上有效的的数据。
如果您将默认单选按钮设置为无效答案,就可以避免偏差。您无需将无效的 HTML 视为必需品。
因此,我们应该为每个单选按钮组构建一个名为“您尚未选择”的默认单选按钮?这显然不符合语义,我认为对用户来说也会造成困惑。
从 UI 的角度来看,更合理的做法是应用一些样式,将用户的注意力吸引到他们尚未选择的选项组。
是的,您将验证输入并明确提醒他们,但为什么要这样做呢?您完全可以提供一个细微的、上下文相关的提醒,避免他们费心。谁会更喜欢在提交时回过头来修正错误,而不是一开始就做对呢?
为什么我们要把事情搞得如此复杂?问题是,当使用单选按钮组来选择性别时,只有两个选项:男性和女性。不要给他们提供“无答案”等选项。
实际上,我曾经被瑞典消费者保护局强制要求将这种不确定性应用于一个表格。当时的情况是,我们希望将在线旅行社的额外保险选项预先填充,但消费者保护局要求我们不要为客户做出任何选择。我们甚至不允许将“否”设置为默认选择…