HTML实现RadioButton单选按钮的方法

这篇文章主要介绍了HTML实现RadioButton单选按钮的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创新互联是一家专注于网站设计制作、网站设计与策划设计,北湖网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:北湖等地区。北湖做网站价格咨询:13518219792

用HTML来实现RadioButton，需要使用input标签，其中type指定为radio。

我们先来看input标签的格式

注：对于需要选中检索的值，可以利用表单的提交或使用JavaScript获取。

我们来看具体的示例

代码如下

  


  

    单选按钮 元素1

    单选按钮 元素2

    单选按钮 元素3

  
  

运行结果

使用Web浏览器打开上述HTML文件时，将显示如下所示的效果。

单击以更改单选按钮的选中状态

在多个组中使用RadioButton时

代码如下

    


  

    

      单选项目1

      单选项目2

      单选项目3

    
    

    

      单选项目4

      单选项目5

      单选项目6

    
    

  

说明：

要将单选按钮分成多个组，请将每个组的name属性设置为不同名称。在上面的例子中，Radio 1，Radio 2，Radio 3的name属性是group 1。Radio 4，Radio 5，Radio 6的name属性是第2组。

运行结果

使用Web浏览器打开上述HTML文件时，将显示如下所示的效果。

每组都是分开的，单选按钮的选择是独立的。

感谢你能够认真阅读完这篇文章，希望小编分享HTML实现RadioButton单选按钮的方法内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!