jQuery Validation至少选中一个复选框 [英] jQuery Validation at least one checkbox is selected

问题描述

我有以下用于表单复选框的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

https://bitly.com/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();
});

在这里拨弄

这篇关于jQuery Validation至少选中一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！