使用 HTML5“必需"一组复选框的属性? [英] Using the HTML5 "required" attribute for a group of checkboxes?

问题描述

使用支持 HTML5 的较新浏览器(例如 FireFox 4)时；
并且表单字段具有属性 required='required';
并且表单字段为空/空白；
然后点击提交按钮；
浏览器检测到必需"字段为空且不提交表单；
相反，浏览器会显示提示，要求用户在字段中输入文本.

现在，我有一组复选框，而不是单个文本字段，其中至少有一个应该由用户选中/选择.

如何在这组复选框上使用 HTML5 required 属性?(由于只需要选中一个复选框，我不能在每个复选框上都加上 required 属性)

ps.如果这很重要，我正在使用 simple_form.

<小时>

更新

可以 HTML 5 multiple 属性 在这里有用吗?有没有人以前用它来做与我的问题类似的事情?

更新

似乎HTML5 规范不支持此功能: ISSUE-111: input.@required 对@type = checkbox 意味着什么?

(问题状态:问题已无偏见地标记为关闭.)而这里是解释.

更新 2

这是一个老问题，但想澄清一下，这个问题的初衷是能够在不使用 Javascript 的情况下完成上述操作 - 即使用 HTML5 的方式来做到这一点.回想起来，我应该让没有 Javascript"更明显.

解决方案

不幸的是，HTML5 没有提供开箱即用的方式来做到这一点.

但是，使用 jQuery，您可以轻松控制复选框组是否至少有一个选中的元素.

考虑以下 DOM 片段:

<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.checkbox-group.required :checkbox:checked').length >0

如果至少检查了一个元素，则返回 true.在此基础上，您可以实施验证检查.

When using the newer browsers that support HTML5 (FireFox 4 for example);
and a form field has the attribute required='required';
and the form field is empty/blank;
and the submit button is clicked;
the browsers detects that the "required" field is empty and does not submit the form;
instead browser shows a hint asking the user to type text into the field.

Now, instead of a single text field, I have a group of checkboxes, out of which at least one should be checked/selected by the user.

How can I use the HTML5 required attribute on this group of checkboxes? (Since only one of the checkboxes needs to be checked, I can't put the required attribute on each and every checkbox)

ps. I am using simple_form, if that matters.

---

UPDATE

Could the HTML 5 multiple attribute be helpful here? Has anyone use it before for doing something similar to my question?

UPDATE

It appears that this feature is not supported by the HTML5 spec: ISSUE-111: What does input.@required mean for @type = checkbox?

(Issue status: Issue has been marked closed without prejudice.) And here is the explanation.

UPDATE 2

It's an old question, but wanted to clarify that the original intent of the question was to be able to do the above without using Javascript - i.e. using a HTML5 way of doing it. In retrospect, I should've made the "without Javascript" more obvious.

解决方案

Unfortunately HTML5 does not provide an out-of-the-box way to do that.

However, using jQuery, you can easily control if a checkbox group has at least one checked element.

Consider the following DOM snippet:

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

You can use this expression:

$('div.checkbox-group.required :checkbox:checked').length > 0

which returns true if at least one element is checked. Based on that, you can implement your validation check.

这篇关于使用 HTML5“必需"一组复选框的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！