如果未选中任何单选项，则发出警报

Alert if ANY radio options are not checked

本文关键字：选项 任何单 如果      更新时间：2023-09-26

我有一个有3个问题的表单，每个问题有3个单选项。我希望表单发送警报，如果任何问题都是空白的。以下代码仅在所有问题都为空时发送警报:

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

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

您有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>
http://jsfiddle.net/4yQHv/1/

您可以将if (count >= questions.length) {更改为===而不是>=，以确保每个问题都选择了一个单选按钮。否则，这允许多个单选按钮被选择(这是不完全可能的，当他们由name属性分组)…我只是想指出这一点

http://jsfiddle.net/tVUuW/

<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");
        }
    });
});

如果你只有几组无线电，你可以使用这个方法，这是验证用户数据的一种方法。

我建议你去看看其中一个很棒的jQuery验证插件:Jzaefferer插件，bassistance插件

还要确保在服务器端也验证了它!用户可以从其他地方向服务器发送请求，甚至可以在浏览器上禁用javascript

你可以遍历所有的单选按钮，看看是否有未选中的:

$('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
       }
    });

相关文章：