如何检查单选按钮是否被选中？

Question

你好我正在尝试制作一个表单，其中需要字段，包括两个单选按钮之一，但由于某种原因，如果我选择它，.checked 属性将不起作用这个document.querySelector('input[name="radio"]:checked')...我没看到什么？

如您所见，我尝试了不同的方法，但缺少一些东西

let contactForm = document.querySelector('.contact-form');
let firstName = document.getElementById('first-name');
let lastName = document.getElementById('last-name');
let textarea = document.getElementById('message');
// let radioBtn = document.querySelector('input[name="radio"]:checked');
// let firstRadioBtn = document.getElementById('male').checked;
// let secondRadioBtn = document.getElementById('female').checked;
// console.log(firstRadioBtn.value, secondRadioBtn.value);
let submitBtn = document.querySelector('.btn');
let successMsg = document.querySelector('.success-message');

// let radios = document.getElementsByName('radio');
// let formValid = false;
// console.log(radios)
// for (let i = 0; i < radios.length; i++) {
//     if (radios[i].checked) {
//         formValid = true
//     }
// }

function checkInputs() {
    let firstNameInput = firstName.value;
    let lastNameInput = lastName.value;
    let text = textarea.value;
    if (firstNameInput === '' || lastNameInput === '' || text === '') {
        firstName.className = 'invalid';
        lastName.className = 'invalid';
        textarea.className = 'invalid';
        successMsg.style.backgroundColor = '#e63946';
        successMsg.style.visibility = 'visible';
        successMsg.innerText = `Please fill in all the required fields`

    }

    if (firstNameInput !== '' && lastNameInput !== '' && text !== '') {
        firstName.className = 'valid';
        lastName.className = 'valid';
        textarea.className = 'valid';
        successMsg.style.backgroundColor = '#52b788';
        successMsg.style.visibility = 'visible';
        successMsg.innerText = `Thank you for your message ${firstNameInput} ${lastNameInput}`
    }


    console.log(`${firstName.value} ${lastName.value} \n Gender: ${radios.value} \n Message: ${message.value}`)
}

<div class="radio-btn label">
                <label for="radio">Male</label>
                <input type="radio" name="radio" id="male" value="male">
                <label for="radio">Female</label>
                <input type="radio" name="radio" id="female" value="female">
            </div>

Answer 1

这应该有效！

<div class="radio-btn label">
    <label for="radio">Male</label>
    <input type="radio" name="radio" id="male" value="male">
    <label for="radio">Female</label>
    <input type="radio" name="radio" id="female" value="female">
</div>
<div id="gender-error" style="color: red; display: none">Please select the gender</div>
<button type="submit" onclick="return submit();">Submit</button>

<script>
    function submit() {
        var radios = document.getElementsByName("radio");
        var value = ""
        for (var i = 0, length = radios.length; i < length; i++) {
            if (radios[i].checked) {
                value = radios[i].value;
                break;
            }
        }

        document.getElementById("gender-error").style.display = !value ? "block" : "none";
        alert(value ? "selected " + value : "no value selected");
    }
</script>

输出：

如何检查单选按钮是否被选中？

How can I check if a radio button is selected?

javascript

dom

function

radio-button

conditional-statements