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

Posted 2023-02-22

【中文标题】如果未选中任何单选选项，则发出警报

【英文标题】：Alert if ANY radio options are not checked

【发布时间】：2013-03-19 09:16:51

【问题描述】：

我有一个包含 3 个问题的表格，每个问题有 3 个单选选项。如果有任何问题留空，我希望表单发送警报。仅当所有问题都留空时，此代码才会发送警报：

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

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

【参考方案1】：

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

【参考方案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>

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

您可以将if (count >= questions.length) 更改为=== 而不是>=，以确保为每个问题准确选择了1 个单选按钮。否则，这允许选择多个单选按钮（当它们按name 属性分组时，这是不可能的）...但只是想指出这一点。

【讨论】：

三个问题，每个问题都有三个单选按钮...是不是应该还有六个未选中的按钮？

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

再次更新，我认为更好。对于有多少问题/区域，它不需要硬编码的数字。唯一需要的是每个问题都可以识别 - 在我的示例中，通过 question 类。

感谢您的工作！不过，另一种解决方案的代码较少，所以我将采用它。

@Pixel 没问题。如果您因为代码较少而认真考虑答案，那么祝您好运。哈哈，这并不总是最好的答案

【参考方案3】：

您可以遍历所有单选按钮并查看是否有任何未选中：

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

Example

【讨论】：

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

【参考方案4】：

你有 3 个无线电组，所以会有 3 个选中的输入和 6 个未选中的输入，我建议：

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

【讨论】：

哈哈有趣，我不敢相信我没有想到这一点。这只有在每个问题的input[radio] 被组合在一起（按名称）时才有效。所以希望，我猜，他们是。

+1，但缺点是每次问题数量发生变化时都需要更新硬编码的 3。

因为我知道问题的数量永远不会改变，并且我确实对每个问题的 input[radio] 进行了分组，所以效果很好。