对一组复选框使用HTML5“必需”属性吗？

使用支持HTML5的较新浏览器时（例如FireFox 4）；
表单字段具有属性required='required';
表单字段为空/空白；
然后单击提交按钮；
浏览器检测到“必填”字段为空，不提交表单；
而是浏览器显示提示，要求用户在字段中键入文本。

现在，我没有一组文本框，而是一组复选框，其中至少有一个应由用户选中/选择。

如何required在这组复选框上使用HTML5 属性？（由于仅需要选中一个复选框，因此无法将required属性放在每个复选框上）

ps。我正在使用simple_form，如果那很重要。

更新

可以在HTML 5 multiple的属性是有帮助吗？之前有人使用它来做类似我的问题的事情吗？

更新

这似乎是这个功能不是HTML5规范的支持： ISSUE-111：什么输入@为@type =复选框需要的意思。？

（问题状态：问题已标记为已关闭，没有任何偏见。）这是解释。

更新2

这是一个古老的问题，但想澄清一下，该问题的初衷是能够在不使用Javascript的情况下完成上述操作，即使用HTML5做到这一点。回想起来，我本该使“没有Java脚本”更加引人注目。

不幸的是，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如果至少检查了一个元素，则返回。基于此，您可以实施验证检查。

这是一个简单的把戏。这是jQuery代码，required如果选中了任何属性，则可以通过更改属性来利用html5验证。以下是您的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脚本，如果选择了任何一个，它将禁用进一步的验证检查。选择使用名称元素。

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

我想没有标准的HTML5方式可以做到这一点，但是如果您不介意使用jQuery库，那么我已经可以使用webshims '“ 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不直接支持在复选框组中仅选中一个/至少一个复选框。这是我使用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将确保至少选中一个复选框，然后取消要求整个复选框组。如果选中的一个复选框未选中，则将再次需要所有复选框！

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

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/

受到@thegauraw和@Brian Woodward的回答的启发，以下是我为JQuery用户提供的一些信息，包括自定义验证错误消息：

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

请注意，我的表单默认情况下具有一些复选框。

也许你们中的某些JavaScript / JQuery向导可以进一步加强这种能力？

我们也可以使用html5轻松做到这一点，只需要添加一些jquery代码

演示版

的HTML

<form>
 <div class="form-group options">
   <input type="checkbox" name="type[]" value="A" required /> A
   <input type="checkbox" name="type[]" value="B" required /> B
   <input type="checkbox" name="type[]" value="C" required /> C
   <input type="submit">
 </div>
</form>

jQuery的

$(function(){
    var requiredCheckboxes = $('.options :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});

我向一组复选框添加了一个不可见的收音机。当至少一个选项被选中时，收音机也被设置为选中。当所有选项都被取消时，收音机也被设置为取消。因此，该表格使用单选提示“请检查至少一个选项”

• 您无法使用，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>

Java脚本

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/

您好，只需使用复选框组之外的其他文本框。单击任何复选框时，请在该文本框中输入值。使该文本框为必需且只读。

我意识到这里有很多解决方案，但是我发现它们都无法满足我的所有要求：

• 无需自定义编码
• 代码在页面加载时有效
• 不需要自定义类（复选框或它们的父类）
• 我需要几个复选框列表来共享相同的内容，name以便通过其API提交Github问题，并且正在使用该名称label[]在多个表单字段（两个复选框列表以及一些选择和文本框）之间分配标签-如果我不共享它们就可以实现这一点相同的名称，但我决定尝试一下，并且有效。

对此的唯一要求是jQuery。您可以将其与@ewall的出色解决方案结合使用，以添加自定义验证错误消息。

/* required checkboxes */
(function ($) {
	$(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);
			}
		}

	});
})(jQuery);

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

这是使用Jquery的另一个简单技巧！

的HTML

<form id="hobbieform">
        <div>
            <input type="checkbox" name="hobbies[]">Coding
            <input type="checkbox" name="hobbies[]">Gaming
            <input type="checkbox" name="hobbies[]">Driving
        </div>
</form>

jQuery查询

$('#hobbieform').on("submit", function (e) {
    var arr = $(this).serialize().toString();
    if(arr.indexOf("hobbies") < 0){
        e.preventDefault();
        alert("You must select at least one hobbie");
    }
});

就是全部..之所以可行，是因为如果未选中任何复选框，则复选框组（包括其名称）都不会发布到服务器

尝试：

self.request.get('sports_played', allow_multiple=True)

要么

self.request.POST.getall('sports_played')

进一步来说：

从复选框数组读取数据时，请确保数组具有：

len>0 

在这种情况下：

len(self.request.get('array', allow_multiple=True)) > 0