JavaScript 检查单选按钮 - JavaScript

在Web开发中，我们经常需要对单选按钮（radio button）进行检查，以判断用户是否选中了某个选项。JavaScript是一种广泛使用的脚本语言，可以用于实现这样的功能。本文将介绍如何使用JavaScript来检查单选按钮的选中状态。

HTML 单选按钮

首先，我们需要在HTML中创建单选按钮。单选按钮的HTML代码如下：

<input type="radio" name="option" value="1"> Option 1
<input type="radio" name="option" value="2"> Option 2
<input type="radio" name="option" value="3"> Option 3

上述代码创建了三个单选按钮，它们的name属性都为"option"，value属性分别为1、2和3。name属性相同的单选按钮会形成一个单选按钮组。

JavaScript 检查选中状态

要检查单选按钮的选中状态，我们可以使用JavaScript的DOM操作。以下是一个用于检查单选按钮选中状态的示例函数：

function checkRadioButton() {
    var option1 = document.querySelector('input[name="option"][value="1"]');
    var option2 = document.querySelector('input[name="option"][value="2"]');
    var option3 = document.querySelector('input[name="option"][value="3"]');
    
    if (option1.checked) {
        console.log("Option 1 is selected");
    } else if (option2.checked) {
        console.log("Option 2 is selected");
    } else if (option3.checked) {
        console.log("Option 3 is selected");
    } else {
        console.log("No option is selected");
    }
}

上述代码使用了querySelector方法来获取指定name和value属性的单选按钮，并使用checked属性来判断是否选中。如果选中了某个选项，则会在控制台输出相应的消息。

使用示例

要使用上述的单选按钮和检查函数，我们可以在页面加载完毕后调用checkRadioButton函数。示例代码如下：

window.onload = function() {
    var button = document.getElementById("checkButton");
    button.addEventListener("click", checkRadioButton);
}

上述代码在页面加载完毕后，获取id为"checkButton"的按钮元素，并为其添加了click事件监听器，当按钮被点击时，会调用checkRadioButton函数。

总结

通过JavaScript，我们可以轻松地实现对单选按钮的选中状态进行检查。以上示例展示了如何创建单选按钮、检查选中状态，并在控制台输出相应的消息。你可以根据实际需求进一步扩展这些功能，比如根据选中状态来执行不同的操作。希望本文对你理解如何使用JavaScript来检查单选按钮有所帮助！