jQuery Validation至少选中一个复选框

本文介绍了jQuery Validation至少选中一个复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有以下用于表单复选框的html代码

I have the following piece of html code for form checkboxes

<div class="drinking col-xs-12"> <div class="col-xs-7 drinkingLeft"> <input type="checkbox" name="allwines" id="allwines" value="0" class="require-one col-xs-1 styled myClassA" value="0" data-label="All Wines" /> <input id='allwinesHidden' type='hidden' value='0' name='allwines'> </div> <div class="col-xs-5 drinkingLeft"> <input type="checkbox" name="beer" id="beer" value="0" class="require-one col-xs-1 styled myClassB" value="0" data-label="Beer" /> <input id='beerHidden' type='hidden' value='0' name='beer'> </div> <div class="clearix"></div> <div class="col-xs-7 drinkingLeft"> <input type="checkbox" name="redwines" id="redwines" value="0" class="require-one col-xs-1 styled myClassC" value="0" data-label="Red Wines" /> <input id='redwinesHidden' type='hidden' value='0' name='redwines'> </div> <div class="col-xs-5 drinkingLeft"> <input type="checkbox" name="cider" id="cider" value="0" class="require-one col-xs-1 styled myClassD" value="0" data-label="Cider" /> <input id='ciderHidden' type='hidden' value='0' name='cider'> </div> <div class="clearix"></div> <div class="col-xs-7 drinkingLeft"> <input type="checkbox" name="whitewines" id="whitewines" value="0" class="require-one col-xs-1 styled myClassE" value="0" data-label="White Wines" /> <input id='whitewinesHidden' type='hidden' value='0' name='whitewines'> </div> <div class="col-xs-5 drinkingLeft"> <input type="checkbox" name="spirits" id="spirits" value="0" class="require-one col-xs-1 styled myClassF" value="0" data-label="Spirits" /> <input id='spiritsHidden' type='hidden' value='0' name='spirits'> </div> <div class="clearix"></div> <div class="col-xs-7 drinkingLeft"> <input type="checkbox" name="sparkling" id="sparkling" value="0" class="require-one col-xs-1 styled myClassG" value="0" data-label="Sparkling/Champagne" /> <input id='sparklingHidden' type='hidden' value='0' name='sparkling'> </div> <div class="col-xs-5 drinkingLeft"> <input type="checkbox" name="fortified" id="fortified" value="0" class="require-one col-xs-1 styled myClassH" value="0" data-label="Fortified" /> <input id='fortifiedHidden' type='hidden' value='0' name='fortified'> </div> <div id="error_msg3"></div> <div class="clearix"></div> </div> </div>

我要确保至少选中了一个复选框.

I want to make sure that at least one of the check boxes is selected.

我希望不作为提醒框；但是该消息需要显示在div error-msg3中.

I want that NOT as an alert box ; however the message need to show up in the div error-msg3.

请注意，所有输入均具有不同的类名称和ID.临时链接位于

Please note that all the inputs have different class names and ids. A staging link is at

bitly/1i3f1MY

我正在使用jQuery验证来验证表单的其余部分.通过jquery验证来获取解决方案将是很好的.

I am using jQuery validation to validate rest of the form. Will be nice to get solution through jquery validation.

预先感谢

推荐答案

您将不得不更改复选框的名称属性，并为minlength设置为1添加规则.

You will have to change the name attributes of the checkboxes, and add a rule for it with the minlength set to 1.

之后，您可以显示自定义消息，并使用:

You can after show the custom message and append it to #error_msg3 with :

if(element.attr("name") == "check") error.appendTo("#error_msg3")

编辑

$("input[type='checkbox'][name='check']").change(function() { if ($("input[type='checkbox'][name='check']:checked").length){ $(this).valid() } })

编辑2

我已经更新了小提琴，现在无论您是否至少选中一个复选框，消息都会正确切换.

I've updated the Fiddle, now the message toggles correctly when you have at least one checkbox checked or not.

$("input[type='checkbox'][name='check']").change(function() { $('#submitDetails').valid(); });

在这里拨弄