blocks|key|1693901|text|对于较新版本的jquery+(我认为是1.3%2B)，您所要做的就是将无线电集合中的一个成员设置为必需的，其余的将由jquery负责：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1693902|<input+type="radio"+name="myoptions"+value="blue"+class="required">+Blue<br+/>
<input+type="radio"+name="myoptions"+value="red">+Red<br+/>
<input+type="radio"+name="myoptions"+value="green">+Green|code-block|syntax|javascript|1693903|以上操作需要在3个单选选项中至少选择1个选项，且名称为“我的选项”，然后才能继续。|1693904|Mahes的标签建议，顺便说一句，效果很好！|1693905|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>With newer releases of jquery (1.3+ I think), all you have to do is set one of the members of the radio set to be required and jquery will take care of the rest:</p>

<pre><code>&lt;input type="radio" name="myoptions" value="blue" class="required"&gt; Blue&lt;br /&gt;
&lt;input type="radio" name="myoptions" value="red"&gt; Red&lt;br /&gt;
&lt;input type="radio" name="myoptions" value="green"&gt; Green
</code></pre>

<p>The above would require at least 1 of the 3 radio options w/ the name of "my options" to be selected before proceeding.</p>

<p>The label suggestion by Mahes, btw, works wonderfully!</p>


blocks|key|1693809|text|使用以下规则验证单选按钮组选择|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1693810|myRadioGroupName+:+{required+:true}|code-block|syntax|javascript|1693811|myRadioGroupName是您为名称属性指定的值|1693812|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>use the following rule for validating radio button group selection</p>

<pre><code>myRadioGroupName : {required :true}
</code></pre>

<p>myRadioGroupName is the value you have given to name attribute</p>


blocks|key|1478618|text|您还可以使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478619|<fieldset>
<input+type="radio"+name="myoptions[]"+value="blue">+Blue<br+/>
<input+type="radio"+name="myoptions[]"+value="red">+Red<br+/>
<input+type="radio"+name="myoptions[]"+value="green">+Green<br+/>
<label+for="myoptions[]"+class="error"+style="display:none;">Please+choose+one.</label>
</fieldset>|code-block|syntax|javascript|1478620|只需添加以下规则|1478621|rules:+{
+'myoptions[]':{+required:true+}
}|1478622|提到如何添加规则。|1478623|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can also use this:</p>

<pre><code>&lt;fieldset&gt;
&lt;input type="radio" name="myoptions[]" value="blue"&gt; Blue&lt;br /&gt;
&lt;input type="radio" name="myoptions[]" value="red"&gt; Red&lt;br /&gt;
&lt;input type="radio" name="myoptions[]" value="green"&gt; Green&lt;br /&gt;
&lt;label for="myoptions[]" class="error" style="display:none;"&gt;Please choose one.&lt;/label&gt;
&lt;/fieldset&gt;
</code></pre>

<p>and simply add this rule</p>

<pre><code>rules: {
 'myoptions[]':{ required:true }
}
</code></pre>

<p>Mention how to add rules. </p>


blocks|key|1694102|text|根据Brandon的回答。但是如果你使用的是data，它使用的是非侵入性的验证，你可以将ASP.NET+-val属性添加到第一个属性中。我也喜欢为每个单选按钮添加标签，以方便使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1694103|<span+class="field-validation-valid"+data-valmsg-for="color"+data-valmsg-replace="true"></span>
<p><input+type="radio"+name="color"+id="red"+value="R"+data-val="true"+data-val-required="Please+choose+one+of+these+options:"/>+<label+for="red">Red</label></p>
<p><input+type="radio"+name="color"+id="green"+value="G"/>+<label+for="green">Green</label></p>
<p><input+type="radio"+name="color"+id="blue"+value="B"/>+<label+for="blue">Blue</label></p>|code-block|syntax|javascript|1694104|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>As per Brandon's answer. But if you're using ASP.NET MVC which uses unobtrusive validation, you can add the data-val attribute to the first one. I also like to have labels for each radio button for usability.</p>

<pre><code>&lt;span class="field-validation-valid" data-valmsg-for="color" data-valmsg-replace="true"&gt;&lt;/span&gt;
&lt;p&gt;&lt;input type="radio" name="color" id="red" value="R" data-val="true" data-val-required="Please choose one of these options:"/&gt; &lt;label for="red"&gt;Red&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;input type="radio" name="color" id="green" value="G"/&gt; &lt;label for="green"&gt;Green&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;input type="radio" name="color" id="blue" value="B"/&gt; &lt;label for="blue"&gt;Blue&lt;/label&gt;&lt;/p&gt;
</code></pre>


blocks|key|1694047|text|另一种验证方法是这样的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1694048|var+$radio+=+$('input:radio[name="nameRadioButton"]');
$radio.addClass("validate[required]");|code-block|syntax|javascript|1694049|我希望我的例子能帮助你|1694050|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Another way to validate is like this.</p>

<pre><code>var $radio = $('input:radio[name="nameRadioButton"]');
$radio.addClass("validate[required]");
</code></pre>

<p>I hope my example will help you</p>


blocks|key|1693982|text|我也有同样的问题。最后只是为验证器编写了一个自定义的高亮和非高亮函数。将此添加到validaton选项中应该会将错误类添加到元素及其相应的标签中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1693983|++++++++'highlight':+function+(element,+errorClass,+validClass)+{
++++++++++++if($(element).attr('type')+==+'radio'){
++++++++++++++++$(element.form).find("input[type=radio]").each(function(which){
++++++++++++++++++++$(element.form).find("label[for="+%2B+this.id+%2B+"]").addClass(errorClass);
++++++++++++++++++++$(this).addClass(errorClass);
++++++++++++++++});
++++++++++++}+else+{
++++++++++++++++$(element.form).find("label[for="+%2B+element.id+%2B+"]").addClass(errorClass);
++++++++++++++++$(element).addClass(errorClass);
++++++++++++}
++++++++},
++++++++'unhighlight':+function+(element,+errorClass,+validClass)+{
++++++++++++if($(element).attr('type')+==+'radio'){
++++++++++++++++$(element.form).find("input[type=radio]").each(function(which){
++++++++++++++++++++$(element.form).find("label[for="+%2B+this.id+%2B+"]").removeClass(errorClass);
++++++++++++++++++++$(this).removeClass(errorClass);
++++++++++++++++});
++++++++++++}else+{
++++++++++++++++$(element.form).find("label[for="+%2B+element.id+%2B+"]").removeClass(errorClass);
++++++++++++++++$(element).removeClass(errorClass);
++++++++++++}
++++++++},|code-block|syntax|javascript|1693984|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I had the same problem. Wound up just writing a custom highlight and unhighlight function for the validator. Adding this to the validaton options should add the error class to the element and its respective label:</p>

<pre><code>        'highlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").addClass(errorClass);
                    $(this).addClass(errorClass);
                });
            } else {
                $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
                $(element).addClass(errorClass);
            }
        },
        'unhighlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").removeClass(errorClass);
                    $(this).removeClass(errorClass);
                });
            }else {
                $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
                $(element).removeClass(errorClass);
            }
        },
</code></pre>


blocks|key|1694132|text|单选按钮的代码-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1694133|<div>
<span+class="radio+inline"+style="margin-right:+10px;">@Html.RadioButton("Gender",+"Female",false)+Female</span>
<span+class="radio+inline"+style="margin-right:+10px;">@Html.RadioButton("Gender",+"Male",false)+Male</span>++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<div+class='GenderValidation'+style="color:#ee8929;"></div>++++
</div>+

<input+class="btn+btn-primary"+type="submit"+value="Create"+id="create"/>|code-block|syntax|javascript|1694134|和jQuery代码-|1694135|<script>
++++$(document).ready(function+()+{
++++++++$('#create').click(function(){

++++++++++++var+gender=$('#Gender').val();
++++++++++++if+($("#Gender:checked").length+==+0){
++++++++++++++++$('.GenderValidation').text("Gender+is+required.");
++++++++++++++++return+false;
++++++++++++}
++++++++});
++++});
</script>|1694136|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>code for radio button -</p>

<pre><code>&lt;div&gt;
&lt;span class="radio inline" style="margin-right: 10px;"&gt;@Html.RadioButton("Gender", "Female",false) Female&lt;/span&gt;
&lt;span class="radio inline" style="margin-right: 10px;"&gt;@Html.RadioButton("Gender", "Male",false) Male&lt;/span&gt;                                                        
&lt;div class='GenderValidation' style="color:#ee8929;"&gt;&lt;/div&gt;    
&lt;/div&gt; 

&lt;input class="btn btn-primary" type="submit" value="Create" id="create"/&gt;
</code></pre>

<p>and jQuery code-</p>

<pre><code>&lt;script&gt;
    $(document).ready(function () {
        $('#create').click(function(){

            var gender=$('#Gender').val();
            if ($("#Gender:checked").length == 0){
                $('.GenderValidation').text("Gender is required.");
                return false;
            }
        });
    });
&lt;/script&gt;
</code></pre>


blocks|key|1478887|text|将错误消息放在顶部。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478888|+++<style>+

+.radio-group{+
++++++position:relative;+margin-top:40px;+
+}+

+#myoptions-error{+
+++++position:absolute;+
+++++top:+-25px;+
++}+

+</style>+

+<div+class="radio-group">+
+<input+type="radio"+name="myoptions"+value="blue"+class="required">+Blue<br+/>+
+<input+type="radio"+name="myoptions"+value="red">+Red<br+/>+
+<input+type="radio"+name="myoptions"+value="green">+Green+</div>
+</div>|code-block|syntax|javascript|1478889|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Puts the error message on top.     </p>

<pre><code>   &lt;style&gt; 

 .radio-group{ 
      position:relative; margin-top:40px; 
 } 

 #myoptions-error{ 
     position:absolute; 
     top: -25px; 
  } 

 &lt;/style&gt; 

 &lt;div class="radio-group"&gt; 
 &lt;input type="radio" name="myoptions" value="blue" class="required"&gt; Blue&lt;br /&gt; 
 &lt;input type="radio" name="myoptions" value="red"&gt; Red&lt;br /&gt; 
 &lt;input type="radio" name="myoptions" value="green"&gt; Green &lt;/div&gt;
 &lt;/div&gt;&lt;!-- end radio-group --&gt;
</code></pre>


<p>How to perform validation for a radio button group (one radio button should be selected) using jQuery validation plugin?</p>


Validation of radio button group using jQuery validation plugin

jQuery

如何使用jQuery验证插件对单选按钮组执行验证(应该选择一个单选按钮)？

问使用jQuery验证插件验证单选按钮组
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery验证插件验证单选按钮组EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery验证插件验证单选按钮组
EN