HTML单选按钮教程及示例

在旧时代,收音机有一些按钮来改变保存到特定按钮的电台。HTML还提供单选按钮,以便将其中一个单选按钮添加到一组单选按钮中。HTML中的单选按钮是用 标记定义的,因为单选按钮被称为来自用户的输入。

FESTO 3501040 536084 CHB-C-N CHB-C-X 高速摄像系统 CheckBox
| 月销量0件
优惠价11000元
原价¥11000

淘口令:

¥ILRNXqMNrKH¥
 

单选按钮标签

我们将通过提供 type 作为 radio 就像下面一样。单选按钮标签没有像等那样的封闭标签。

单选按钮组

单选按钮通常用作一个组。因为单选按钮的主要用法是向用户提供一些选择,用户选择其中一个。所以我们通常提供多个单选按钮作为一个组。为了创建组,同一组中所有单选按钮的“单选按钮名称”属性应相同。例如,如果我们想询问用户年龄范围,我们必须为下面的所有单选按钮使用相同的名称。

         

Radio Buttons

Below 18 Between 18 and 65 Over 65
Radio Button Group
单选按钮组

设置默认单选按钮选择

当用户显式选择其中一个单选按钮时,默认行为是取消选择所有单选按钮。在某些情况下,我们需要提供一个默认选中的单选按钮。我们可以用 checked 输入标记中的属性。在本例中,我们将提供 Between 18 and 65 默认选中。

         

Radio Buttons

Below 18 Between 18 and 65 Over 65
Set Default Radio Button Selection
设置默认单选按钮选择

检查是否选择了给定的单选按钮

选择单选按钮后,我们可以在JavaScript中获取或检查选中的单选按钮值。我们可以使用不同的框架AngularJS、jQuery等,但为了简单起见,我们将使用纯JavaScript。我们将从单选按钮名称中获取值并对其进行迭代。

         

Radio Buttons

Below 18 Between 18 and 65 Over 65
图片[3]-HTML单选按钮教程及示例-cppku-C++库

图片[4]-HTML单选按钮教程及示例-cppku-C++库

禁用单选按钮

单选按钮可以在不同的情况下使用,在某些情况下必须禁用。我们可以用 disabled 属性,该属性将禁用并阻止选择单选按钮。在本例中,我们将禁用 Over 65 单选按钮。

         

Radio Buttons

Below 18 Between 18 and 65 Over 65
Disable Radio Button
禁用单选按钮

单选按钮与复选框

与单选按钮一样,也有复选框提供多项选择。单选按钮和复选框之间的主要区别是,一次只能选中一个单选按钮,但可以选中多个复选框,而不会出现问题。  所以单选按钮套件,以单一的回答问题,如年龄,性别,是/否等,其中复选框可以起诉多个回答问题,如团队,学校,城市等。

© 版权声明
THE END
喜欢就支持一下吧,技术咨询可以联系QQ407933975
点赞0
分享