使用 jQuery 验证单选按钮答案

【问题标题】：Validating radio button with jQuery使用 jQuery 验证单选按钮
【发布时间】：2018-10-13 01:38:37
【问题描述】：

我有一个包含多个问题的表单（动态创建的问卷）。我使用 jQuery 将收音机样式设置为按钮 (http://jqueryui.com/demos/button/#radio)，但我在这里稍微减少了代码...

<div class="yesnoradios">
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_Y" value="Y" />Yes
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_N" value="N" />No
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_NA" value="NA" />N/A
</div>

所以，我有多个上述实例，动态命名为id。

我正在努力在客户端验证提交时的表单。我需要做的是确保为每个问题选择一个答案。我没有太多的 jQuery 经验，所以到目前为止我所做的只是围绕每个问题进行循环。

$('.yesnoradios').each(function(index) {
    alert($(this).attr("id"));
});

我想我会提到，在查看英文页面时，它使用 select 而不是单选按钮，我可以很好地验证，但在这种情况下我不能使用它的原因是用户正在以一种语言查看页面，其中“是”或“否”的等价物会根据您对问题的结构而有所不同，因此我使用的是勾号和叉号。

提前感谢您的帮助。

编辑： 我尝试做的是使用 .children() 函数来检查是否已选中，如果未选中则设置一个表示表单无效的标志。但我无法正确使用语法，也找不到合适的代码示例。

【问题讨论】：

可能为时已晚，但this plugin 可以提供帮助。
看起来很棒的插件。肯定会在未来的项目中使用它。谢谢。

标签： javascript jquery validation

【解决方案1】：

假设您有很多以下...

<div class="yesnoradios">
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_Y" value="Y" />Yes
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_N" value="N" />No
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_NA" value="NA" />N/A
</div>

您可以使用以下代码查看是否至少选择了所有组中的一个

$('.yesnoradios input[type=radio]:checked').length

这将为您提供已检查组的确切编号。使用class="yesnoradios" 的编号检查它，如果您有相同的编号，则每个 yesnoradio div 中的至少一个收音机已被检查

if($('.yesnoradios').length == $('.yesnoradios input[type=radio]:checked').length){
    //all groups have at least one radio checked
}else{
    //not all are chedked and you can loop your else logic here
}

注意：您在一个组中的所有收音机都应该具有相同的名称...并且由于您在此处发布了未渲染的 html，我假设它确实如此。

【讨论】：

嗨 LoneWOLFs，是的，他们都同名。感谢您提供代码 sn-p，将尝试一下。

【解决方案2】：

if ($('input[name='+ radioName +']:checked').length) {
           // at least one of the radio buttons was checked
           return true; // allow whatever action would normally happen to continue
      }
      else {
           // no radio button was checked
           return false; // stop whatever action would normally happen
      }

【讨论】：

这不会检查是否所有yesnoradio 类都经过验证...他必须在循环中检查所有 div。

【解决方案3】：

试试这个。你的 html 应该是这样的

radio buttons with class "optionCls" in a div with id question1
radio buttons with class "optionCls" in a div with id question2
.
.

现在你可以参考它

if($('#question1.optionCls :checked').length() > 0) 
     alert('valid'); //will tell you for question1 whether answer is selected or not

构建您的逻辑以使其具有动态性

【讨论】：