名称相同的多个复选框上的必需属性？

Question

我有一个具有相同名称的属性的复选框列表，我需要验证其中至少有一个已被选中。

但是，当我对所有这些都使用html5属性"required“时，浏览器(chrome & ff)不允许我提交表单，除非所有这些都被选中。

样本代码：

<label for="a-0">a-0</label>
<input type="checkbox" name="q-8" id="a-0" required />
<label for="a-1">a-1</label>
<input type="checkbox" name="q-8" id="a-1" required />
<label for="a-2">a-2</label>
<input type="checkbox" name="q-8" id="a-2" required />

当使用相同的无线电输入时，表单将按预期工作(如果选择了其中一个选项，则表单将生效)

根据乔·霍夫加特纳 (他声称引用了html5规范)，假定的行为是：

对于复选框，只有在选中具有该名称的一个或多个复选框时，才能满足所需的属性。 对于单选按钮，只有在选中该单选组中的一个单选按钮时，才能满足所需的属性。

我是做错了什么，还是这是浏览器的错误(在两个chrome &ff上)？

Answer 1

对不起，现在我已经读到了你期望的更好的内容，所以我正在更新答案。

基于HTML5规范从W3C，没有什么是错的。我创建了这个JSFiddle测试，它基于规范(对于那些基于规范的浏览器，比如Chrome 11和Firefox 4)的行为是正确的：

​

<form>
    <input type="checkbox" name="q" id="a-0" required autofocus>
    <label for="a-0">a-1</label>
    <br>

    <input type="checkbox" name="q" id="a-1" required>
    <label for="a-1">a-2</label>
    <br>

    <input type="checkbox" name="q" id="a-2" required>
    <label for="a-2">a-3</label>
    <br>

    <input type="submit">
</form>

​

我同意它不是很有用(事实上，很多人在W3C的邮件列表中抱怨过)。

但是浏览器只是遵循标准的建议，这是正确的。这个标准有点误导，但我们在实践中什么也做不了。--您可以始终使用JavaScript进行表单验证，尽管，就像一些伟大的jQuery验证插件。

另一种方法是选择一个聚脂填充，它可以使(几乎)所有浏览器正确地解释表单验证。

Answer 2

您可以使用jQuery减少行数：

$(function(){

    var requiredCheckboxes = $(':checkbox[required]');

    requiredCheckboxes.change(function(){

        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        }

        else {
            requiredCheckboxes.attr('required', 'required');
        }
    });

});

使用$(':checkboxrequired')，您可以选择具有所需属性的所有复选框，然后，通过将.change方法应用于这组复选框，您可以在该组的任何项发生更改时执行所需的函数。在这种情况下，如果选中了任何复选框，我将删除作为所选组一部分的所有复选框的必需属性。

我希望这能帮到你。

永别了。

Answer 3

提供另一种类似于@IvanCollantes的答案的方法。它还通过按名称过滤所需的复选框来工作。我还简化了代码，并检查了默认的checked复选框。

​

jQuery(function($) {
  var requiredCheckboxes = $(':checkbox[required]');
  requiredCheckboxes.on('change', function(e) {
    var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]');
    var isChecked = checkboxGroup.is(':checked');
    checkboxGroup.prop('required', !isChecked);
  });
  requiredCheckboxes.trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form target="_blank">
  <p>
    At least one checkbox from each group is required...
  </p>
  <fieldset>
    <legend>Checkboxes Group test</legend>
    <label>
      <input type="checkbox" name="test[]" value="1" checked="checked" required="required">test-1
    </label>
    <label>
      <input type="checkbox" name="test[]" value="2" required="required">test-2
    </label>
    <label>
      <input type="checkbox" name="test[]" value="3" required="required">test-3
    </label>
  </fieldset>
  <br>
  <fieldset>
    <legend>Checkboxes Group test2</legend>
    <label>
      <input type="checkbox" name="test2[]" value="1" required="required">test2-1
    </label>
    <label>
      <input type="checkbox" name="test2[]" value="2" required="required">test2-2
    </label>
    <label>
      <input type="checkbox" name="test2[]" value="3" required="required">test2-3
    </label>
  </fieldset>
  <hr>
  <button type="submit" value="submit">Submit</button>
</form>

​