如果有任何单选按钮未被选中，请发出警报

Question

我有一个表单，其中有3个问题，每个问题有3个单选选项。如果任何一个问题没有填写，我希望表单能够发送一个警报。下面的代码只有在所有问题都没有填写时才会发送警报：

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

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

- Pixel

Answer 1

您有3个单选框组，因此会有3个选中的输入和6个未选中的输入，我建议：

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

- Ram

---

哈哈有趣，我简直不敢相信我没有想到这个。但是这只有在每个问题的 input[radio] 被分组在一起（按名称）时才能起作用。所以希望并且我猜它们是这样的。 - Ian

+1 但缺点是每次问题数量改变时都需要更新硬编码的3。 - Martin Smith

由于我知道问题的数量永远不会改变，并且我已经为每个问题分组了输入[单选]，所以这很完美地运作。 - Pixel

Answer 2

试试这个：

$(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>

您可以将 if (count >= questions.length) { 的关系运算符从 >= 改为 ===，以确保每个问题都只能选择一个单选按钮。否则，这会导致多个单选按钮被选择（当它们由 name 属性分组时并不完全可能）...但我只是想指出这一点。

http://jsfiddle.net/4yQHv/1/

- Ian

---

三个问题，每个问题有三个单选按钮... 难道不应该还有六个未被选中的按钮吗？ - Teemu

@MartinSmith 我刚刚更新了。我认为现在它按预期工作了。 - Ian

更新后，我认为更好了。它不需要硬编码问题/区域的数量。唯一需要的是每个问题都可以识别 - 在我的示例中，通过question类。 - Ian

谢谢你的工作！不过另一个解决方案代码更少，所以我会选择那个。 - Pixel

@Pixel 没问题。如果你只是因为代码量少就选择一个答案，那么祝你好运。哈哈，这并不总是最好的答案。 - Ian

Answer 3

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 plugin，bassistance plugin 此外，确保您也在服务器端验证它！用户可以从其他地方发送请求到您的服务器，甚至在浏览器中禁用javascript。

- refaelio

Answer 4

你可以循环遍历所有单选按钮，看看它们中是否有任何一个未被选中：

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

示例

- Artyom Neustroev

---

这会创建一个无限循环——“您留下了一个空白！”警报不会消失。 - Pixel