js实现单选

2026-04-05 17:56:47JavaScript

使用HTML和JavaScript实现单选功能

通过HTML的<input type="radio">元素结合JavaScript可以实现单选功能。以下是一个完整的实现示例：

<!DOCTYPE html>
<html>
<head>
    <title>单选按钮示例</title>
</head>
<body>
    <form id="radioForm">
        <input type="radio" id="option1" name="radioGroup" value="选项1">
        <label for="option1">选项1</label><br>

        <input type="radio" id="option2" name="radioGroup" value="选项2">
        <label for="option2">选项2</label><br>

        <input type="radio" id="option3" name="radioGroup" value="选项3">
        <label for="option3">选项3</label><br>
    </form>

    <button onclick="getSelectedValue()">获取选中值</button>
    <p id="result"></p>

    <script>
        function getSelectedValue() {
            const radios = document.getElementsByName('radioGroup');
            let selectedValue = '';

            for (let i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    selectedValue = radios[i].value;
                    break;
                }
            }

            document.getElementById('result').textContent = 
                selectedValue ? `选中的是: ${selectedValue}` : '请选择一个选项';
        }
    </script>
</body>
</html>

使用事件监听器实现实时选择反馈

可以通过添加事件监听器在用户选择时立即获取结果：

document.querySelectorAll('input[name="radioGroup"]').forEach(radio => {
    radio.addEventListener('change', function() {
        if(this.checked) {
            console.log('选中的值:', this.value);
            document.getElementById('result').textContent = `选中的是: ${this.value}`;
        }
    });
});

使用jQuery简化实现

如果项目中使用了jQuery，可以更简洁地实现单选功能：

$('input[name="radioGroup"]').change(function() {
    $('#result').text('选中的是: ' + $('input[name="radioGroup"]:checked').val());
});

动态生成单选按钮

有时需要根据数据动态生成单选按钮：

const options = ['红色', '绿色', '蓝色'];
const container = document.getElementById('radioForm');

options.forEach((option, index) => {
    const radio = document.createElement('input');
    radio.type = 'radio';
    radio.id = `option${index+1}`;
    radio.name = 'colorGroup';
    radio.value = option;

    const label = document.createElement('label');
    label.htmlFor = radio.id;
    label.textContent = option;

    container.appendChild(radio);
    container.appendChild(label);
    container.appendChild(document.createElement('br'));
});

单选按钮组样式美化

可以使用CSS自定义单选按钮样式：

input[type="radio"] {
    display: none;
}

input[type="radio"] + label {
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

input[type="radio"]:checked + label {
    background-color: #4285f4;
    color: white;
    border-color: #4285f4;
}

表单验证

确保用户至少选择了一个选项：

js实现单选

function validateForm() {
    const selected = document.querySelector('input[name="radioGroup"]:checked');
    if(!selected) {
        alert('请至少选择一个选项');
        return false;
    }
    return true;
}