对一组复选框使用HTML5 "required“属性？
当使用支持HTML5 (例如FireFox 4)的较新浏览器时；
表单字段的属性为required='required'；
且表单域为空/空；
并点击提交按钮；
浏览器检测到“必填”字段为空，不提交表单；
相反，浏览器会显示一个提示，要求用户在字段中键入文本。
现在，我有了一组复选框，而不是单个文本字段，其中至少有一个应该由用户选中/选择。
如何在这组复选框上使用HTML5 required属性？(因为只需要选中其中一个复选框，所以我不能将required属性放在每个复选框上)
ps。我正在使用simple_form，如果这很重要的话。
更新
HTML 5 multiple attribute在这里会有帮助吗？以前有没有人用它来做类似我的问题的事情？
更新
It HTML5 spec不支持此功能： ISSUE-111: What does input.@required mean for @type = checkbox?
(问题状态:问题已标记为已关闭，不会有任何影响。)和here is the explanation。
更新2
这是一个古老的问题，但想要澄清的是，这个问题的初衷是能够在不使用Javascript的情况下完成上述任务--即使用HTML5的方式。回想起来，我应该让“没有Javascript”变得更明显。
回答 14
Stack Overflow用户
发布于 2015-05-05 22:10:01
不幸的是，HTML5没有提供一种开箱即用的方式。
但是，使用jQuery，您可以轻松地控制复选框组是否至少有一个选中元素。
考虑下面的DOM代码片段：
<div class="checkbox-group required">
<input type="checkbox" name="checkbox_name[]">
<input type="checkbox" name="checkbox_name[]">
<input type="checkbox" name="checkbox_name[]">
<input type="checkbox" name="checkbox_name[]">
</div>您可以使用以下表达式：
$('div.checkbox-group.required :checkbox:checked').length > 0如果至少选中了一个元素，则返回true。在此基础上，您可以实现验证检查。
Stack Overflow用户
发布于 2016-06-15 10:23:31
这是一个简单的技巧。这是jQuery代码，如果选中任何一个属性，则可以通过更改html5属性来利用required验证。以下是您的html代码(请确保为组中的所有元素添加了required。)
<input type="checkbox" name="option[]" id="option-1" value="option1" required/> Option 1
<input type="checkbox" name="option[]" id="option-2" value="option2" required/> Option 2
<input type="checkbox" name="option[]" id="option-3" value="option3" required/> Option 3
<input type="checkbox" name="option[]" id="option-4" value="option4" required/> Option 4
<input type="checkbox" name="option[]" id="option-5" value="option5" required/> Option 5下面是jQuery脚本，如果选择了任何一个，该脚本将禁用进一步的验证检查。选择使用名称元素。
$cbx_group = $("input:checkbox[name='option[]']");
$cbx_group = $("input:checkbox[id^='option-']"); // name is not always helpful ;)
$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
$cbx_group.prop('required', false);
}这里有个小问题:因为你使用的是html5验证，所以一定要在验证之前，也就是表单提交之前执行它。
// but this might not work as expected
$('form').submit(function(){
// code goes here
});
// So, better USE THIS INSTEAD:
$('button[type="submit"]').on('click', function() {
// skipping validation part mentioned above
});Stack Overflow用户
发布于 2016-08-09 16:35:11
HTML5不直接支持要求在复选框组中只选中一个/至少一个复选框。以下是我使用Javascript的解决方案：
HTML
<input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required> One
<input class='acb' type='checkbox' name='acheckbox[]' value='2' onclick='deRequire("acb")' required> TwoJAVASCRIPT
function deRequireCb(elClass) {
el=document.getElementsByClassName(elClass);
var atLeastOneChecked=false;//at least one cb is checked
for (i=0; i<el.length; i++) {
if (el[i].checked === true) {
atLeastOneChecked=true;
}
}
if (atLeastOneChecked === true) {
for (i=0; i<el.length; i++) {
el[i].required = false;
}
} else {
for (i=0; i<el.length; i++) {
el[i].required = true;
}
}
}javascript将确保至少选中一个复选框，然后取消对整个复选框组的要求。如果选中的一个复选框未选中，那么它将再次要求所有复选框！
https://stackoverflow.com/questions/6218494
复制相似问题