如果选择了单选按钮,则检查JavaScript函数

JavaScript 单选按钮检查函数详解

基础概念

单选按钮（Radio Button）是HTML表单中的一种输入控件，允许用户从一组选项中选择一个且只能选择一个选项。在JavaScript中，我们可以通过多种方式检查哪个单选按钮被选中。

检查单选按钮的JavaScript方法

方法1：使用getElementById

function checkRadioSelection() {
    if (document.getElementById('option1').checked) {
        console.log('Option 1 is selected');
    } else if (document.getElementById('option2').checked) {
        console.log('Option 2 is selected');
    } else {
        console.log('No option is selected');
    }
}

方法2：使用querySelector

function checkRadioSelection() {
    const selectedOption = document.querySelector('input[name="options"]:checked');
    if (selectedOption) {
        console.log('Selected option value:', selectedOption.value);
    } else {
        console.log('No option is selected');
    }
}

方法3：遍历所有单选按钮

function checkRadioSelection() {
    const radioButtons = document.getElementsByName('options');
    let selectedValue;
    
    for (let i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) {
            selectedValue = radioButtons[i].value;
            break;
        }
    }
    
    if (selectedValue) {
        console.log('Selected value:', selectedValue);
    } else {
        console.log('No option is selected');
    }
}

常见问题及解决方案

问题1：无法获取选中的单选按钮

原因：可能没有为单选按钮设置相同的name属性解决：确保所有相关单选按钮有相同的name属性

问题2：checked属性总是返回false

原因：可能在页面加载前就检查了状态解决：确保在DOM加载完成后执行检查函数

问题3：动态添加的单选按钮无法被检测

原因：事件监听器没有正确绑定解决：使用事件委托或在添加元素后重新绑定事件

应用场景

表单验证
问卷调查
设置选项选择
多步骤向导中的选择步骤
产品配置选择

完整示例

<!DOCTYPE html>
<html>
<head>
    <title>Radio Button Example</title>
</head>
<body>
    <form>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label><br>
        
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label><br>
        
        <input type="radio" id="other" name="gender" value="other">
        <label for="other">Other</label><br><br>
        
        <button type="button" onclick="checkSelection()">Check Selection</button>
    </form>

    <script>
        function checkSelection() {
            const selectedGender = document.querySelector('input[name="gender"]:checked');
            
            if (selectedGender) {
                alert('Selected gender: ' + selectedGender.value);
            } else {
                alert('Please select a gender option');
            }
        }
    </script>
</body>
</html>

这个示例展示了如何创建一个简单的性别选择表单，并使用JavaScript检查用户的选择。