JavaScript - 检查单选按钮是否被选中

Question

在我的表单中，我有两个单选按钮，页面有一个脚本来验证表单本身，直到单选按钮。因此，如果您在单选按钮之前满足所有条件，您将能够提交表单，因此我自然要确保用户在提交表单之前选择一个选项。

我在这里找到了一个函数：Radio button validation in javascript

我已经改编了顶部答案中的脚本以适合我当前的脚本，但它不起作用。它要么崩溃，要么显示错误，但仍会转到提交页面。

自从答案使用var formValid = false;和我使用valid = true;.

我已经注释掉了函数的单选按钮检查部分并将其返回到默认参数（并清除了答案对大括号的错误使用）。

function checkForm() {
    var valid = true;
    var radios = document.getElementsByName("smoking");

    if (!retext.test(document.myform.textfield.value)) {
            document.myform.textfield.style.border = "3.5px solid red";
            document.getElementById("text").innerHTML = "Invalid text.";
            document.getElementById("text").style.display = "block";
            valid = false;
    }

    if (!re.test(document.myform.email.value)) {
        document.myform.email.style.border = "3.5px solid red";
        document.getElementById("emailwarn").innerHTML = "Invalid email.";
        document.getElementById("emailwarn").style.display = "block";
        valid = false;
    }

    if (!retel.test(document.myform.tel.value)) {
        document.myform.tel.style.border = "3.5px solid red";
        document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
        document.getElementById("telwarn").style.display = "block";
        valid = false;
    }

    /*var i = 0;
    while (!valid && i < radios.length) {
       if (radios[i].checked) {
            valid = true;
        }
        i++;
    }

    if (!valid) {
        document.getElementById("radiowarn").innerHTML = "Please select one.";
        document.getElementById("radiowarn").style.display = "block";
    }*/

    return valid;
}

---

<form name="myform" method="POST" action="http://manutd.com" onsubmit="return checkForm()">
    <fieldset>
        <legend>Hi</legend>
        <label>Random text: </label>
        <input type="text" name="textfield">
        <div id="text"></div>
        <label>Email: </label>
        <input type="email" name="email">
        <div id="emailwarn"></div>
        <label>Tel: </label>
        <input type="tel" name="tel" maxlength="11">
        <div id="telwarn"></div>
        <label>Smoking: </label>
        <input type="radio" name="smoking" value="1">
        <label>Non-smoking: </label>
        <input type="radio" name="smoking" value="2">
        <div id="radiowarn"></div>
        <input type="submit" value="Submit Form">
        <input type="reset" value="Reset Form">
    </fieldset>
</form>

Answer 1

$(document).ready(function () {
    $('.smoking').on('change', function () {
        var radiosSmoking = document.getElementsByName('smoking');
        if (radiosSmoking[0].checked) {
            console.log('smoking checked')
        } else if (radiosSmoking[1].checked) {
            console.log('no smoking checked')
        }
    });
});

小提琴参考

另外一个选项：

 var radiosSmoking = document.getElementsByName('smoking');
    if (!(radiosSmoking[0].checked || radiosSmoking[1].checked)) {
        valid = false;
    }

希望这可以帮助。