当使用支持HTML5的新浏览器时(例如FireFox 4); 表单字段有required='required'属性; 表单字段为空/空白; 然后点击提交按钮; 浏览器检测到“required”字段为空，不提交表单;相反，浏览器显示一个提示，要求用户在字段中输入文本。
现在，我有了一组复选框，而不是单一的文本字段，其中至少有一个应该由用户选中/选择。
如何在这组复选框上使用HTML5 required属性? (因为只有一个复选框需要被选中，我不能把所需的属性放在每个复选框上)
ps.我使用simple_form，如果这很重要。
更新
HTML 5的多重属性在这里有用吗?以前有人用它来做类似我的问题吗?
更新
HTML5规范似乎不支持这个特性:ISSUE-111:什么是输入?@type =复选框的@required mean ?
(发行状态:发行已被标记为已关闭。) 下面是解释。
更新2
这是一个老问题，但我想澄清的是，这个问题的最初意图是能够在不使用Javascript的情况下完成上述工作——即使用HTML5的方式来完成。回想起来，我应该更明显地说明“没有Javascript”。
当前回答
我想没有标准的HTML5方法来做到这一点，但如果你不介意使用jQuery库，我已经能够使用webshims的“组要求”验证功能来实现“复选框组”验证:
group-required的文档如下:
如果复选框具有类'group-required'，则至少有一个 在表单/文档中具有相同名称的复选框必须是 检查。
下面是一个如何使用它的例子:
<input name="checkbox-group" type="checkbox" class="group-required" id="checkbox-group-id" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
我主要使用webshims来填充HTML5功能，但它也有一些很棒的可选扩展，比如这个。
它甚至允许您编写自己的自定义有效性规则。例如，我需要创建一个不是基于输入名称的复选框组，所以我为此编写了自己的有效性规则…
其他回答
我想没有标准的HTML5方法来做到这一点，但如果你不介意使用jQuery库，我已经能够使用webshims的“组要求”验证功能来实现“复选框组”验证:
group-required的文档如下:
如果复选框具有类'group-required'，则至少有一个 在表单/文档中具有相同名称的复选框必须是 检查。
下面是一个如何使用它的例子:
<input name="checkbox-group" type="checkbox" class="group-required" id="checkbox-group-id" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
我主要使用webshims来填充HTML5功能，但它也有一些很棒的可选扩展，比如这个。
它甚至允许您编写自己的自定义有效性规则。例如，我需要创建一个不是基于输入名称的复选框组，所以我为此编写了自己的有效性规则…
我知道这里有很多解决方案，但我发现没有一个能满足我的所有要求:
不需要自定义编码 代码在页面加载时工作 不需要自定义类(复选框或它们的父类) 我需要几个复选框列表共享相同的名称，通过他们的API提交Github问题，并使用名称标签[]跨许多表单字段分配标签(两个复选框列表和一些选择和文本框)-授予我可以实现这一点，没有他们共享相同的名称，但我决定尝试一下，它起作用了。
唯一的要求是jQuery，如果你想用普通的JS重写它，它很容易被消除。您可以将其与@ewall的出色解决方案结合起来，添加自定义验证错误消息。
/* required checkboxes */ jQuery(function ($) { var $requiredCheckboxes = $("input[type='checkbox'][required]"); /* init all checkbox lists */ $requiredCheckboxes.each(function (i, el) { //this could easily be changed to suit different parent containers var $checkboxList = $(this).closest("div, span, p, ul, td"); if (!$checkboxList.hasClass("requiredCheckboxList")) $checkboxList.addClass("requiredCheckboxList"); }); var $requiredCheckboxLists = $(".requiredCheckboxList"); $requiredCheckboxLists.each(function (i, el) { var $checkboxList = $(this); $checkboxList.on("change", "input[type='checkbox']", function (e) { updateCheckboxesRequired($(this).parents(".requiredCheckboxList")); }); updateCheckboxesRequired($checkboxList); }); function updateCheckboxesRequired($checkboxList) { var $chk = $checkboxList.find("input[type='checkbox']").eq(0), cblName = $chk.attr("name"), cblNameAttr = "[name='" + cblName + "']", $checkboxes = $checkboxList.find("input[type='checkbox']" + cblNameAttr); if ($checkboxList.find(cblNameAttr + ":checked").length > 0) { $checkboxes.prop("required", false); } else { $checkboxes.prop("required", true); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" action="post.php"> <div> Type of report: </div> <div> <input type="checkbox" id="chkTypeOfReportError" name="label[]" value="Error" required> <label for="chkTypeOfReportError">Error</label> <input type="checkbox" id="chkTypeOfReportQuestion" name="label[]" value="Question" required> <label for="chkTypeOfReportQuestion">Question</label> <input type="checkbox" id="chkTypeOfReportFeatureRequest" name="label[]" value="Feature Request" required> <label for="chkTypeOfReportFeatureRequest">Feature Request</label> </div> <div> Priority </div> <div> <input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: High" required> <label for="chkPriorityHigh">High</label> <input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: Medium" required> <label for="chkPriorityMedium">Medium</label> <input type="checkbox" id="chkTypeOfContributionLow" name="label[]" value="Priority: Low" required> <label for="chkPriorityMedium">Low</label> </div> <div> <input type="submit" /> </div> </form>
不幸的是，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。 在此基础上，您可以实现验证检查。
我也遇到过同样的问题，我的解决方案是这样的:
HTML:
<form id="processForm.php" action="post">
<div class="input check_boxes required wish_payment_type">
<div class="wish_payment_type">
<span class="checkbox payment-radio">
<label for="wish_payment_type_1">
<input class="check_boxes required" id="wish_payment_type_1" name="wish[payment_type][]" type="checkbox" value="1">Foo
</label>
</span>
<span class="checkbox payment-radio">
<label for="wish_payment_type_2">
<input class="check_boxes required" id="wish_payment_type_2" name="wish[payment_type][]" type="checkbox" value="2">Bar
</label>
</span>
<span class="checkbox payment-radio">
<label for="wish_payment_type_3">
<input class="check_boxes required" id="wish_payment_type_3" name="wish[payment_type][]" type="checkbox" value="3">Buzz
</label>
<input id='submit' type="submit" value="Submit">
</div>
</form>
JS:
var verifyPaymentType = function () {
var checkboxes = $('.wish_payment_type .checkbox');
var inputs = checkboxes.find('input');
var first = inputs.first()[0];
inputs.on('change', function () {
this.setCustomValidity('');
});
first.setCustomValidity(checkboxes.find('input:checked').length === 0 ? 'Choose one' : '');
}
$('#submit').click(verifyPaymentType);
https://jsfiddle.net/oywLo5z4/
我在一组复选框中添加了一个隐形收音机。 当至少选中一个选项时，无线电也被设置为选中。 当所有选项都被取消时，收音机也被设置为取消。 因此，表单使用无线电提示“请至少选中一个选项”
你不能使用display: none，因为无线电不能聚焦。 我使单选字符的大小等于整个复选框的大小，这样在提示时就更明显了。
HTML
<form>
<div class="checkboxs-wrapper">
<input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/>
<input type="checkbox" name="option[]" value="option1"/>
<input type="checkbox" name="option[]" value="option2"/>
<input type="checkbox" name="option[]" value="option3"/>
</div>
<input type="submit" value="submit"/>
</form>
Javascript
var inputs = document.querySelectorAll('[name="option[]"]')
var radioForCheckboxes = document.getElementById('radio-for-checkboxes')
function checkCheckboxes () {
var isAtLeastOneServiceSelected = false;
for(var i = inputs.length-1; i >= 0; --i) {
if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
}
radioForCheckboxes.checked = isAtLeastOneCheckboxSelected
}
for(var i = inputs.length-1; i >= 0; --i) {
inputs[i].addEventListener('change', checkCheckboxes)
}
CSS
.checkboxs-wrapper {
position: relative;
}
.checkboxs-wrapper input[name="radio-for-required-checkboxes"] {
position: absolute;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-appearance: none;
pointer-events: none;
border: none;
background: none;
}
https://jsfiddle.net/codus/q6ngpjyc/9/
