jQuery Validation 至少有一个复选框被选中

Question

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

<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>

我想确保至少有一个复选框被选中。

我希望 NOT 作为警告框；但是该消息需要显示在 div error-msg3 中。

请注意，所有输入都有不同的类名和 ID。暂存链接位于

https://bitly.com/1i3f1MY

我正在使用 jQuery 验证来验证表单的其余部分。很高兴通过 jquery 验证获得解决方案。

提前致谢

Answer 1

您必须更改复选框的名称属性，并为其添加一条规则，并将 minlength 设置为 1。

您可以在显示自定义消息后将其附加到#error_msg3 ：

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

我已经更新了 Fiddle，现在当您至少选中一个复选框时，消息会正确切换。

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

Fiddle here

Answer 2

这很简单……

function validate_form()
{
valid = true;

if($('input[type=checkbox]:checked').length == 0)
{
    alert ( "ERROR! Please select at least one checkbox" );
    valid = false;
}

return valid;
}

HTML

<form name="myform" method="post" action="#" onsubmit="return validate_form();">
<input type="checkbox" name="box1"  value="box1">Box1
<input type="checkbox" name="box2"  value="box2">Box2
<input name="submit" type="submit" value="Submit"/>
</form>

Answer 3

引用OP：

“我想确保至少有一个复选框被选中。”

如果您想使用 jQuery Validate 插件，并且所有复选框都有不同的 name，只需使用 the additional-methods.js file 中的 require_from_group 方法即可。

由于您在这些复选框上已经有一个名为 require-one 的通用类，因此更加简单。

$('#form').validate({
    rules: {
        fieldname: {
            require_from_group: [1, '.require-one']
        },
        // declare same rule on all eight checkboxes
        ....
        ....
    }
});

但是，您可以使用 jQuery .each() 中的 .rules('add') 方法一次性声明它们，而不是在 .validate() 中声明所有这八个。

$('.require-one').each(function () {
    $(this).rules('add', {
        require_from_group: [1, this],
        messages: {
            require_from_group: "please check one"
        }
    });
});

然后要将所有八条消息合二为一，请使用groups 选项...

$('#form').validate({
    groups: {  // combine these error messages into one
        checkboxes: 'allwines beer redwines cider whitewines spirits sparkling fortified'
    }
});

工作演示：http://jsfiddle.net/JVWu2/1/

将您的错误消息放入 #error_msg3 错误框与放入任何其他 jQuery Validate 消息没有什么不同。

Answer 4

试试这个

$("#YourbuttonId").click(function(){
    if($('input[type=checkbox]:checked').length == 0)
    {
        alert('Please select atleast one checkbox');
    }
});

通过插件

HTML

<label class="checkbox inline">
<input type="checkbox" id="typecb1" name="spamm[]" value="Loading Point"> Loading Point
</label>
<label class="checkbox inline">
<input type="checkbox" id="typecb2" name="spamm[]" value="Unloading Point"> Unloading Point
</label>
<label class="checkbox">
<input type="checkbox" id="typecb3" name="spamm[]" value="Retailer Unloading"> Retailer Unloading
</label>

脚本

rules:{
     "spamm[]": { 
      required: true, 
      minlength: 1 
      }
   }

Answer 5

试试

添加此代码即可

var chck = $('input[type=checkbox]');
chck.addClass('check-one');
$.validator.addMethod('check-one', function (value) {
    return (chck.filter(':checked').length > 0);
}, 'Check at least one checkbox');

---

fiddle Demo

组只会在前面的第一个复选框中显示错误

var chck = $('input[type=checkbox]');
chck.addClass('check-one');
$.validator.addMethod('check-one', function (value) {
    return (chck.filter(':checked').length > 0);
}, 'Check at least one checkbox');
var chk_names = $.map(chck, function (el, i) {
    return $(el).prop("name");
}).join(" ");
$("#submitDetails").validate({
    groups: {
        checks: chk_names
    },
    submitHandler: function (form) {
        alert('Form Submited');
        return false;
    }
});

---

如果您希望在所有复选框前显示错误，请删除组

fiddle Demo

$("#submitDetails").validate({
    submitHandler: function (form) {
        alert('Form Submited');
        return false;
    }
});