JavaScript 如何检查单选按钮

单选按钮是一种在表单中用于接收用户输入的图标。它允许用户从一组单选按钮中选择一个值。单选按钮基本上用于单选多个选项，这在GUI表单中经常使用。

您可以在两个或多个单选按钮之间标记/选择一个单选按钮。在本章中，我们将指导您如何使用JavaScript编程语言来检查单选按钮。

为此，首先我们设计一个包含单选按钮的表单使用HTML，然后我们将使用JavaScript编程来检查单选按钮。我们还将检查哪个单选按钮的值被选中。

创建一个单选按钮

以下是创建一组单选按钮的简单代码。

<p> Choose your favroite season: </p>
<input type="radio" name="JTP" id="summer" value="summer">Summer<br> 
<input type="radio" name="JTP" id="winter" value="winter">Winter<br> 
<input type="radio" name="JTP" id="rainy" value="rainy">Rainy<br>
<input type="radio" name="JTP" id="autumn" value="autumn">Autumn<br>

检查单选按钮

我们不需要编写任何特定的代码来检查单选按钮。它们可以在创建或在HTML表单中指定后进行选中。

然而，我们需要编写JavaScript代码来获取选中的单选按钮的值，这将在下面的章节中看到：

检查单选按钮是否被选中

在JavaScript中有两种方法来检查标记的单选按钮或识别哪个单选按钮被选中。JavaScript提供了两个DOM方法。

getElementById
querySelector

输入框的checked属性用于检查复选框是否被选中。使用 document.getElementById(‘id’).checked 方法。它将返回单选按钮的选中状态作为布尔值。它可以是true或false。

True – 如果单选按钮被选中。

False – 如果单选按钮没有被选中/勾选。

查看下方的JavaScript代码了解它的工作原理：

示例

例如，我们有一个名为Summer的单选按钮，id为’summer’。现在，我们将使用该按钮ID来检查单选按钮是否被标记。

if(document.getElementById('summer').checked == true) { 
         document.write("Summer radio button is selected"); 
} else {
         document.write("Summer radio button is not selected"); 
}

querySelector()

querySelector()函数是JavaScript的DOM方法。它使用其中的单选按钮的常见名称属性。如下所示使用此方法来检查哪个单选按钮被选中。

document.querySelector('input[name="JTP"]:checked')

示例

例如，我们有一组单选按钮，具有相同的name属性name=’season’。现在，在这些名为season的按钮之间，我们将检查哪个按钮被选中。

 var getSelectedValue = document.querySelector( 'input[name="season"]:checked'); 
 if(getSelectedValue != null) { 
          document.write("Radio button is selected");
} else {
          document.write("Nothing has been selected");
}

获取选中单选按钮的值

使用getElementById()方法

以下是使用getElementById()方法获取选中单选按钮的值的代码：

if(document.getElementById('summer').checked) { 
       var selectedValue = document.getElementById('summer').value;
       alert("Selected Radio Button is: " + selectedValue);  
}

使用querySelector()

以下是使用querySelector()方法获取选中单选按钮值的代码：

var getSelectedValue = document.querySelector( 'input[name="season"]:checked'); 
 if(getSelectedValue != null) { 
          alert("Selected radio button values is: " + getSelectedValue.value);
}

获取选中的单选按钮值的完整代码

在这个示例中，我们将把上面的所有代码放在一起来创建和检查一个单选按钮。之后，我们还将获取选中单选按钮的值。

<html>
<body>
<br><b> Choose your favroite season: </b><br>
<input type="radio" id="summer" value="Summer">Summer<br> 
<input type="radio" id="winter" value="Winter">Winter<br> 
<input type="radio" id="rainy" value="Rainy">Rainy<br>
<input type="radio" id="autumn" value="Autumn">Autumn<br><br>     

<button type="button" onclick=" checkButton()"> Submit </button> 

<h3 id="disp" style= "color:green"> </h3>
<h4 id="error" style= "color:red"> </h4>
</body>

<script>
function checkButton() {  
            if(document.getElementById('summer').checked) { 
                document.getElementById("disp").innerHTML 
                    = document.getElementById("summer").value 
                    + " radio button is checked"; 
            } 
            else if(document.getElementById('winter').checked) { 
                document.getElementById("disp").innerHTML 
                    = document.getElementById("winter").value 
                    + " radio button is checked";   
            } 
            else if(document.getElementById('rainy').checked) { 
                document.getElementById("disp").innerHTML 
                    = document.getElementById("rainy").value 
                    + " radio button is checked";   
            } 
            else if(document.getElementById('autumn').checked) { 
                document.getElementById("disp").innerHTML 
                    = document.getElementById("autumn").value 
                    + " radio button is checked";   
            }
            else { 
                document.getElementById("error").innerHTML 
                    = "You have not selected any season"; 
            } 
        } 
    </script> 
</html>

输出

当你执行上面的代码时，它会在网页上运行并给出以下输出：

JavaScript 如何检查单选按钮

选择一个单选按钮，然后点击提交按钮并获取所选值。

JavaScript 如何检查单选按钮

如果你不选择任何季节直接点击提交按钮，会显示一个错误信息： 你还没有选择任何季节 ，因为我们使用了验证。

JavaScript 如何检查单选按钮

获取选中单选按钮的值：querySelector()

DOM querySelector()方法

querySelector()函数是JavaScript的DOM方法。该方法用于获取与文档中指定的CSS选择器匹配的元素。请记住需要在HTML代码中指定单选按钮的name属性。

它的使用方式为document.querySelector(‘input[name=”JTP”]:checked’)，用于从一组单选按钮中检查所选单选按钮的值。通过使用一行简短的代码获取所选单选按钮的值，可以减少代码的长度。

var selectedValue = document.querySelector('input[name="JTP"]:checked')

看下面的代码如何与HTML表单一起使用：

<html>
<body>
<br><b> Choose your favroite season: </b><br>
<input type="radio" name="season" id="summer" value="Summer"> Summer <br> 
<input type="radio" name="season" id="winter" value="Winter"> Winter <br> 
<input type="radio" name="season" id="rainy" value="Rainy"> Rainy <br>
<input type="radio" name="season" id="autumn" value="Autumn"> Autumn 
<br><br>     

<button type="button" onclick=" checkButton()"> Submit </button> 

<h3 id="disp" style= "color:green"> </h3>
<h4 id="error" style= "color:red"> </h4>
</body>

<script>
    function checkButton() {  
            var getSelectedValue = document.querySelector( 
                'input[name="season"]:checked'); 

            if(getSelectedValue != null) { 
                document.getElementById("disp").innerHTML 
                    = getSelectedValue.value 
                    + " season is selected"; 
            } 
            else { 
                document.getElementById("error").innerHTML 
                    = "*You have not selected any season"; 
            } 
        }  
    </script> 
</html>

输出

当您执行上述代码时，将在网页上显示如下的输出结果。从这里选择您喜欢的季节。

JavaScript 如何检查单选按钮