对一组checkbox使用HTML5“required”属性？

当使用支持HTML5的新型浏览器时（例如FireFox 4）;
并且表单字段具有required='required'的属性;
表单域为空/空白;
并点击提交button;
浏览器检测到“必填”字段为空，不提交表单;
而是浏览器显示一个提示，要求用户在该字段中键入文本。

现在，我有一组checkbox ，而不是一个单独的文本框 ，其中至less有一个应该由用户检查/select。

如何在这组checkbox上使用HTML5 required属性？ （因为只有一个checkbox需要检查，我不能把每个checkbox的required属性）

PS。 如果有问题，我正在使用simple_form 。

---

UPDATE

HTML 5的multiple属性可以在这里帮助吗？ 有没有人使用它之前做类似于我的问题？

UPDATE

看起来 HTML5规范不支持这个特性： ISSUE-111：input是什么@ @ required for @type = checkbox？

（问题状态： 问题已被标记为无偏见 ）。 这里是解释 。

Answer 1

不幸的是，HTML5并没有提供一个现成的方式来做到这一点。

但是，使用jQuery，您可以轻松控制checkbox组是否至less有一个checked元素。

考虑下面的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> 

你可以使用这个expression式：

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

如果至less有一个元素被选中，则返回true 。 基于此，您可以实施您的validation检查。

Answer 2

我想没有标准的HTML5方法来做到这一点，但如果你不介意使用jQuery库，我已经能够使用webshims的“ group-required ”validationfunction来实现“checkbox组”validation：

文档为小组需要说：

如果一个checkbox的类为“group-required”，则必须检查表单/文档中的至less一个同名checkbox。

下面是一个如何使用它的例子：

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

我主要使用webshim来填充HTML5的function，但它也有一些很好的可选扩展，如这个。

它甚至允许您编写自己的自定义有效性规则。 例如，我需要创build一个不基于input名称的checkbox组，所以我为此写了自己的有效性规则 。

Answer 3

它是一个简单的技巧。 这是jQuery的代码，可以利用HTML5validation通过更改required属性，如果任何一个检查。 以下是您的html代码（确保您添加了组中所有元素的必需项）。

 <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脚本，它将禁用进一步的validation检查，如果select任何一个。 select使用名称元素。

 $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); } 

这里有个小问题：由于您使用的是html5validation，因此请确保您在validation之前即在表单提交之前执行此操作。

 // 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 }); 

Answer 4

HTML5不直接支持在checkbox组中仅选中一个/至less一个checkbox。 这是我使用Javascript的解决scheme：

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将确保至less选中一个checkbox，然后取消整个checkbox组。 如果选中的一个checkbox未被选中，那么将需要所有checkbox。

Answer 5

我有同样的问题，我的解决办法是这样的：

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/

Answer 6

受@thegauraw和@Brian Woodward的回答的启发，这里有一点我为JQuery用户拉到一起，包括一个自定义validation错误消息：

 $cbx_group = $("input:checkbox[name^='group']"); $cbx_group.on("click", function() { if ($cbx_group.is(":checked")) { // checkboxes become unrequired as long as one is checked $cbx_group.prop("required", false).each(function() { this.setCustomValidity(""); }); } else { // require checkboxes and set custom validation error message $cbx_group.prop("required", true).each(function() { this.setCustomValidity("Please select at least one checkbox."); }); } }); 

请注意，我的表单有一些默认选中的checkbox。

也许你们中的一些JavaScript / JQuery向导可以收紧更多？

Answer 7

嗨只是使用checkbox组附加一个文本框。当点击任何checkbox将值放入该文本框。使该文本框需要和只读。