JavaScript 如何检查一个单选按钮是否被选中

在HTML中，radio按钮允许开发者为一个选择创建多个选项。用户可以选择任何一个选项，而我们可以得到它的值，并知道用户从多个选项中选择了哪个选项。

因此，检查用户选择哪个单选按钮以了解他们在多个选项中的选择是很重要的。让我们通过现实生活中的例子来理解它。当你填写任何表格并要求选择性别时，你可以看到他们给你三个选项，而你只能选择一个。

在本教程中，我们将学习两种方法，用JavaScript检查radio按钮是否被选中。

使用单选按钮的选中属性

我们可以使用各种方法在JavaScript中访问radio元素。之后，我们可以使用它的checked属性来检查选中的单选按钮是否被选中。如果checked属性的值为真，意味着该单选按钮被选中；否则，它没有被选中。

语法

用户可以按照下面的语法，使用radio元素的checked属性，检查radio按钮是否被选中。

<input type = "radio" name = "radio" value = "male" id = "radio1" > Male</input> 
<script>
   let radio1 = document.getElementById('radio1');
   if(radio1.checked){
      // radio1 is checked
   }
</script>

在上面的语法中，我们使用id访问了单选按钮，并使用checked属性来检查if语句中的单选按钮是否被选中。

示例

在下面的例子中，我们已经创建了三个单选按钮，包含不同的值，如男性、女性和其他。在JavaScript中，我们通过id访问每个单选按钮，并检查每个单选按钮的’checked’属性的值。

当用户选择任何单选按钮并点击按钮时，他们会看到一条显示所选单选按钮的值的信息。

<html>
<body>
   <h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected.</h3>
   <input type = "radio" name = "radio" value = "male" id = "radio1" > Male </input> <br>
   <input type = "radio" name = "radio" value = "female" id = "radio2" > Female </input><br>
   <input type = "radio" name = "radio" value = "other" id = "radio3" /> Other </input>
   <p id = "output"> </p>
   <button onclick = "checkRadio()"> Check radio </button>
   <script>
      let output = document.getElementById("output");
      function checkRadio(){
         // accessing the radio buttons
         let radio1 = document.getElementById('radio1');
         let radio2 = document.getElementById('radio2');
         let radio3 = document.getElementById('radio3');
         // checking if any radio button is selected
         if(radio1.checked){
            output.innerHTML = "The radio button with value " + radio1.value + " is checked!";
         }
         if(radio2.checked){
            output.innerHTML = "The radio button with value " + radio2.value + " is checked!";
         }
         if(radio3.checked){
            output.innerHTML = "The radio button with value " + radio3.value + " is checked!";
         }
      }
   </script>
</body>
</html>

示例

下面的例子与上面的例子几乎一样，但不同的是，我们是用它们的名字一次访问所有的无线电按钮。getElementByName()方法返回所有名称为radio的单选元素。

之后，我们使用for-of循环来遍历单选按钮的数组，并使用’checked’属性检查每个单选按钮是否被选中。

<html>
<body>
   <h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected</h3>
   <input type = "radio" name = "radio" value = "10" id = "radio1"> 10 </input> <br>
   <input type = "radio" name = "radio" value = "20" id = "radio2"> 20 </input> <br>
   <input type = "radio" name = "radio" value = "30" id = "radio3" /> 30 </input>
   <p id = "output"> </p>
   <button onclick = "getSelectedRadio()"> Check radio </button>
   <script>
      let output = document.getElementById("output");
      function getSelectedRadio() {
         let radioButtons = document.getElementsByName('radio');
         for (let radio of radioButtons) {
            if (radio.checked) {
               output.innerHTML = "The radio button is selected and it's value is " + radio.value;
            }
         }
      }
   </script>
</body>
</html>

使用querySelector()方法来检查单选按钮是否被选中。

程序员可以使用JavaScript的querySelector()方法来选择任何HTML元素。在这里，我们使用querySelector()方法，只选择了选中的单选按钮。如果没有选择单选按钮，它将返回一个空值。

语法

用户可以按照下面的语法来使用querySelector()方法来检查单选按钮是否被选中。

var selected = document.querySelector('input[name="year"]:checked');

在上面的语法中，’年’是单选按钮组的名称，它返回任何属于’年’组并被选中的单选按钮。

示例

在下面的例子中，我们创建了三个单选按钮，向用户提供三种不同的选择。当用户点击Check selected year按钮时，它调用getSelectedRadio()函数，该函数使用querySelector()方法来选择名称为’year’的单选按钮，并从DOM中检查。

用户可以在不选择任何单选按钮的情况下点击按钮，观察输出。

<html>
<body>
   <h3>Using the <i> querySelector() method </i> to check whether a radio button is selected.</h3>
   <input type = "radio" name = "year" value = "1999" id = "radio1"> 1999 </input><br>
   <input type = "radio" name = "year" value = "2021" id = "radio2"> 2021 </input><br>
   <input type = "radio" name = "year" value = "2001" id = "radio3" /> 2001 </input>
   <p id="output"></p>
   <button onclick="getSelectedRadio()">Check selected year</button>
   <script>
      let output = document.getElementById("output");
      function getSelectedRadio() {
         var selected = document.querySelector(
         'input[name="year"]:checked');
         if (selected) {
            output.innerHTML += "Radio button is selected."
         } else {
            output.innerHTML += "Not any radio button is selected!"
         }
      }
   </script>
</body>
</html>