我有以下一段用于表单复选框的 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。暂存链接位于
我正在使用 jQuery 验证来验证表单的其余部分。很高兴通过jquery验证获得解决方案。
提前致谢
最佳答案
您必须更改复选框的名称属性,并为其添加一条规则,并将 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();
});
关于jQuery 验证至少选中一个复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20159867/