Javascript 如果未选中任何收音机选项,则发出警报

Javascript 如果未选中任何收音机选项,则发出警报,javascript,jquery,forms,radio-button,Javascript,Jquery,Forms,Radio Button,我有一张有3个问题的表格,每个问题有3个选项。如果有任何问题留空,我希望表单发送警报。仅当所有问题均为空时,此代码才会发送警报: if (!$("input").is(':checked')) { alert("You left one blank!"); } 因此,例如,如果我只回答了一个问题,我希望发送警报。相反,它将继续执行代码。您可以循环浏览所有单选按钮,查看是否有未选中的单选按钮: $('input[type="radio"]').each(function () {

我有一张有3个问题的表格,每个问题有3个选项。如果有任何问题留空,我希望表单发送警报。仅当所有问题均为空时,此代码才会发送警报:

if (!$("input").is(':checked')) {
    alert("You left one blank!");
}

因此,例如,如果我只回答了一个问题,我希望发送警报。相反,它将继续执行代码。

您可以循环浏览所有单选按钮,查看是否有未选中的单选按钮:

$('input[type="radio"]').each(function () {
       if( ! $(this).is(':checked') ) {
           alert('You left one blank!');
           return false; //exit function, so alert won't show multiple times
       }
    });

您有3个无线电组,因此将有3个选中输入和6个未选中输入,我建议:

if ( $("input[type=radio]:checked").length < 3 ) {
    alert('Please answer all of the questions');
}
试试这个:

$(document).ready(function () {
    $("#btn1").on("click", function () {
        var count = 0;
        var questions = $("div.question");
        questions.each(function () {
            if ($(this).find("input").filter('[type="radio"]').filter(":checked").length > 0) {
                count++;
            }
        });
        if (count >= questions.length) {
            alert("all good");
        } else {
            alert("something not checked");
        }
    });
});
使用HTML:

<div class="question">
    Question 1:
    <input type="radio" name="radio1" />
    <input type="radio" name="radio1" />
    <input type="radio" name="radio1" />
</div>

<div class="question">
    Question 2:
    <input type="radio" name="radio2" />
    <input type="radio" name="radio2" />
    <input type="radio" name="radio2" />
</div>

<div class="question">
    Question 3:
    <input type="radio" name="radio3" />
    <input type="radio" name="radio3" />
    <input type="radio" name="radio3" />
</div>

<div>
    <input type="button" id="btn1" value="Submit" />
</div>
如果count>=questions.length{to be===而不是>=则可以更改,以确保每个问题只选择一个单选按钮。否则,这允许选择多个单选按钮,而这在按名称属性分组时是不可能的…但我只想指出这一点

如果只有几组无线电,则可以使用此方法,这是验证用户数据的一种方法

我建议您查看一个很棒的jQuery验证插件: ,


此外,还要确保在服务器端验证!用户可以从其他地方向您的服务器发送请求,甚至在浏览器上禁用javascript

这会创建一个无限循环,您留下一个空白!警报不会消失。三个问题各有三个单选按钮…不是吗,应该还有六个未选中的按钮ttons?@MartinSmith我刚刚更新。我认为它正在按照预期工作,现在更新了,我认为更好。它不需要硬编码的数字来显示有多少问题/区域。唯一需要的是每个问题都可以识别-在我的示例中,通过问题类。感谢您的工作!另一个解决方案的代码更少,尽管如此,我还是要这么说。@Pixel没问题。如果你认真地回答问题,因为它的代码更少,那么祝你好运。哈哈,这并不总是最好的答案哈哈,有趣的是,我不敢相信我没有想到。这只会在输入[收音机]时起作用因为每个问题都是按名称分组的。所以我希望,我猜,它们是+1,但缺点是每次问题数量改变时都需要更新硬编码的3。因为我知道问题数量永远不会改变,并且我对每个问题的输入[收音机]进行了分组,这非常有效。
<form>
    <input type="radio" name="facepunch" class="facepunch" value="1" />
    <input type="radio" name="facepunch" class="facepunch" value="2" />
    <input type="radio" name="facepunch" class="facepunch" value="3" />
    <br />
    <input type="radio" name="stack" class="stack" value="1" />
    <input type="radio" name="stack" class="stack" value="2" />
    <input type="radio" name="stack" class="stack" value="3" />
    <br />
    <input id="button" type="button">
</form>

$(document).ready(function(){
    $('#button').click(function(){
        if(!$("input.facepunch:checked").val()) {
            alert("Please select facepunch");
        }

        if(!$("input.stack:checked").val()) {
            alert("Please select stack");
        }
    });
});