JavaScript如何获取单选按钮的选择状态

本篇文章给大家分享的是有关JavaScript如何获取单选按钮的选择状态，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

10年积累的成都网站设计、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站后付款的网站建设流程，更有长子免费网站建设让你可以放心的选择与我们合作。

我们先来看看checked属性的值

true：选中单选按钮

false：未选中单选按钮

在表单中获取单选按钮时

由id属性指定的情况

在JavaScript中引用id的表单控件

document.forms.(参照表格的id).(参照控件的id)

通过id引用单选按钮的选择状态时

document.forms.(参照表格的id).(参照单选按钮的id).checked

也可以访问

document.(参照表格的name).(参照单选按钮的id).checked

由name属性指定时

可以从名称获取文本框和复选框的控件，但是对于单选按钮，如果将其设置为相同的单选按钮组，则不能使用从名称获取，因为名称的值相同。我们将从之前介绍的ID中检查选择状态。

代码如下

  
  


  

    
      单选按钮 元素1

    
      单选按钮 元素2

    
      单选按钮 元素3

  
  

说明：

以上是单选按钮的选中状态更改时要执行的JavaScript代码。可以使用checked属性获取单选按钮已选择的状态。如果选中单选按钮，则为true，如果未选中，则为false。确定已检查属性并将消息显示为具有“输出”ID的元素的HTML。

 

    单选项目1

    单选项目2

    
  

以上是表单部分的HTML。表单有两个复选框和一个按钮。在按钮的onclick事件上执行onBVuttonCLick（）函数。

运行结果

执行上面的HTML文件。将显示如下所示的效果。

单击单选按钮选择它。选择后，单选按钮底部会显示一条消息，表示已选中元素。

使用GetElementById获取的情况

使用DOM，可以在GetElemenById中获取单选按钮的选择状态，使用GetElementById，即使表单中不存在单选按钮，也可以获取它。

代码如下

  
  



  单选按钮 元素1

  单选按钮 元素2

  单选按钮 元素3

  

说明：

单击单选按钮并更改选择状态时，将调用onRadioButtonChange（）函数。在函数内，调用GetElementById方法并获取Radio 1，Radio 2，Radio 3的单选按钮对象。选择状态由单选按钮对象的checked属性的值确定。页面上显示与单选按钮选择状态对应的消息。

运行结果

使用Web浏览器执行上述HTML文件。将显示如下所示的效果。

单击单选按钮选择。选中后，将显示已选中的消息。

如果更改单选按钮以进行选择，则消息内容也会相应的更改。

以上就是JavaScript如何获取单选按钮的选择状态，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。