HTML复选框和单选框 checkbox和radio事件介绍

坦率地说,使用 HTML 复选框和单选按钮的最安全方法是全面使用单击事件。
不要被 IE 更改事件所愚弄。
我们先来说说最重要的事情。
IE 更改事件必须等到焦点离开后才能触发。
去年,当我们运行一个电子商务项目时,用户反映选择单选按钮后,很长时间没有响应。
切换到单击后几秒钟内问题就得到了解决。
还有一点是点击事件与键盘操作完全兼容。
例如,我可以使用 Tab 进行切换,然后按 Space 来选择收音机,或者在 WebKit 中我可以使用滚轮进行选择,但 mousedown 根本不起作用。
老实说,这很令人困惑。
还有另一个重要的细节。
复选框还可以使用空格键触发单击,但无法按下鼠标,因此我们发现单击是更通用的选择。

一开始我以为mousedown是一个较低级别的,但后来我意识到我错了。
由于现代浏览器对键盘导航的支持,点击已经达到了天空。
等等,还有别的事。
设计表单时,单选和复选有不同的目的。
单选适用于“同意或不同意”等二项选择场景,而复选框适用于“最喜欢的运动”等多项选择场景。
默认勾选是比较方便的,但如非必要请不要使用。
例如,第一个单选按钮默认为“Like”,用户根本不需要与其交互。
如果您默认选中了两个或三个以上的复选框,您的用户肯定会觉得您正在为他们做决定。
请注意,单选按钮组中的所有名称必须与“name=”radiobutton”完全相同。
这是广播选择的核心。
如果你忘记了这个技巧,用户可能会同时检查三个选项,这绝对是一场灾难。

下次创建表单时,我们建议使用单击事件,小心使用默认选项,并记住检查名称属性。
您会选择单选选项还是多选选项?首先,考虑用户最多可以选择多少个选项。

设置radio选中(设置radio被选中)

我记得有一次在一个周末下午帮助一位朋友调试在线调查页面。
该页面包含一组单选按钮,允许用户选择他们的性别。
一位朋友告诉我,他希望在页面加载时默认选择“男性”选项。
我最初的想法是,仅仅将 selected 属性添加到 HTML 中的“男性”单选按钮还不够吗?但我仔细想想,如果页面包含其他逻辑,指定的默认状态可能会被覆盖。

因此,我决定在页面的 JavaScript 代码中编写一段逻辑,以确保“提及”单选按钮在页面加载后设置为选择。
我编写了一个简单的函数,它使用 document.getElementsByName 查找所有名为“gender”的单选按钮,然后迭代它们,找到值为“male”的单选按钮,并将其 select 属性设置为 true。
代码可能如下所示:
javascript 窗口.onload = 函数() { var 无线电 = 文档。
getElementsByName('性别'); for (var i = 0; i < radios xss=clean xss=clean> 经测试,页面加载后,“男性”选项已经默认选中。
但是,我突然想到,如果用户手动更改选择,那么当页面再次加载时,默认的选择状态是否会再次被覆盖?这需要再次测试。

HTML复选框和单选框?checkbox和radio事件介绍

点击结果良好,单个选择是互斥的,多选是多选,默认选择谨慎,相同选择的选择相互不兼容。

项目:电子商务网站用户调查,时间:2 02 3 年,数量:5 0万用户。

在用户调查表中,单选按钮用于“性别”,方框用于“爱好和兴趣”。

默认情况下选择的选项不超过 3 个,以避免用户烦恼。

评价一下自己。