当使用支持HTML5的新浏览器时(例如FireFox 4);
表单字段有required='required'属性;
表单字段为空/空白;
然后点击提交按钮;
浏览器检测到“required”字段为空,不提交表单;相反,浏览器显示一个提示,要求用户在字段中输入文本。
现在,我有了一组复选框,而不是单一的文本字段,其中至少有一个应该由用户选中/选择。
如何在这组复选框上使用HTML5 required属性?
(因为只有一个复选框需要被选中,我不能把所需的属性放在每个复选框上)
ps.我使用simple_form,如果这很重要。
更新
HTML 5的多重属性在这里有用吗?以前有人用它来做类似我的问题吗?
更新
HTML5规范似乎不支持这个特性:ISSUE-111:什么是输入?@type =复选框的@required mean ?
(发行状态:发行已被标记为已关闭。)
下面是解释。
更新2
这是一个老问题,但我想澄清的是,这个问题的最初意图是能够在不使用Javascript的情况下完成上述工作——即使用HTML5的方式来完成。回想起来,我应该更明显地说明“没有Javascript”。
我在一组复选框中添加了一个隐形收音机。
当至少选中一个选项时,无线电也被设置为选中。
当所有选项都被取消时,收音机也被设置为取消。
因此,表单使用无线电提示“请至少选中一个选项”
你不能使用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/
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> Two
JAVASCRIPT
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将确保至少选中一个复选框,然后取消对整个复选框组的要求。如果选中的复选框变为未选中,那么它将再次需要所有的复选框!