如何为一组复选框使用 required 属性？ [复制]

Posted 2023-05-08

【中文标题】如何为一组复选框使用 required 属性？ [复制]

【英文标题】：How can I use required attribute for a group of checkboxes? [duplicate]

【发布时间】：2014-12-09 00:02:08

【问题描述】：

我有一组复选框，其中至少一个必须选中才能提交表单。为此，我将每个复选框都命名为相同的名称并设置了required 属性。

但这不起作用：

<input name="mycheckgroup" type="checkbox" value="1" required />
<input name="mycheckgroup" type="checkbox" value="2" required /> 
<input name="mycheckgroup" type="checkbox" value="3" required />

我必须选中所有三个框才能提交表单:-(

如果这是单选按钮，它可以工作...但我希望至少选中一个或多个框。

谁能帮忙？

【问题讨论】：

默认选择一个单选按钮..这对您来说很容易。 check it here

【参考方案1】：

在不引入 javascript 的情况下，最合乎逻辑的答案是将您的控件更改为 select 元素（这更适合您的情况）：

<select>
  <option value="1" selected>Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

如果这对您来说不是一个足够好的解决方案，那么您将不得不使用 JavaScript 处理验证。我不会在这里提供解决方案，因为您没有标记javascript，而且您可能已经知道如何自己执行此操作。

如果您确实想使用 JavaScript 方法，您应该编辑您的问题以询问可能的 JavaScript 解决方案并包含您使用的任何库 - 尽管本着 *** 的精神，您应该尝试自己解决这个问题。

---

不，对不起。我，觉得你误会了。我需要检查一个或多个复选框的可能性。 - cypher75

在这种情况下，您可以为您的select 元素赋予multiple 属性，从而允许您选择多个选项：

<select multiple required>
    <option disabled>Select Multiple</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

为了使select 元素的required 属性生效，我添加了一个初始的option 元素disabled。

【讨论】：

不，抱歉。我，觉得你误会了。我需要检查一个或多个复选框的可能性。

@cypher75 我已经更新了我的答案。此外，我已从您的问题中删除了“谢谢”，因为在 *** 上不鼓励这样做（不是个人问题！）。

从用户体验的角度来看，复选框比多选框更容易处理。我讨厌必须用两只手按住 CTRL 然后左键单击以选择多个项目。但是，如果您需要对复选框执行“一个或多个复选框”所需条件，则需要执行更复杂的 JavaScript 事件触发验证。

【参考方案2】：

我不知道，我需要 javascript 来实现这个解决方案，我没有标记它，抱歉。

但我需要它是复选框（没有选择）。

所以，这是我使用 jQuery 的工作解决方案：

<script>
$('.myCB').click(function()
    if($('#cb1').is(':checked') || $('#cb2').is(':checked') || $('#cb3').is(':checked'))
        $(".myCB").attr("required", false);
    else
        $(".myCB").attr("required", true);
);
</script>

<input name="mycheckgroup" id="cb1" type="checkbox" value="1" class="myCB" required />
<input name="mycheckgroup" id="cb2" type="checkbox" value="2" class="myCB" required /> 
<input name="mycheckgroup" id="cb3" type="checkbox" value="3" class="myCB" required />

检查任何复选框时，将从本组中的所有复选框中删除所需的属性。

【参考方案3】：

这是我想出的绝妙技巧：

详情： https://***.com/a/37825072/1479143

小sn-p：

$cbx_group = $("input:checkbox[name='q-8']");
$cbx_group.prop('required', true);
if($cbx_group.is(":checked"))
  $cbx_group.prop('required', false);

【参考方案4】：

如果您将代码包含在表单标签中，这将起作用，并且在您执行提交操作时将触发验证。并使用jQuery动态添加html5所需属性。

HTML 代码

<form>
    <input name="mycheckgroup" type="checkbox" value="1"  />
    <input name="mycheckgroup" type="checkbox" value="2"  /> 
    <input name="mycheckgroup" type="checkbox" value="3"  />
    <input type="submit" id="btnSubmit" value="submit" />
</form>

jQuery 代码

$("#btnSubmit").click(function(e)
    if( $("input[name=mycheckgroup]:checked").length == 0)
        $("input[name=mycheckgroup]:first").attr("required", "required");
    else
        $("input[name=mycheckgroup]").removeAttr("required");               
        $("form").submit();
               
);

http://jsfiddle.net/2sxy6uqd/2/

【讨论】：

感谢您的回答。但这不是解决方案。在您的示例中，您必须选中所有三个框才能满足要求。但我希望它至少需要选中一个复选框；-)

默认情况下，HTML5 核心不包含组复选框。相反，您可以使用 jquery 来验证这一点。参考jsfiddle.net/2sxy6uqd/1

这个问题已经用 jQuery 解决了 ;-)

好的。但是在另一个示例中，我发现了一个问题，如果您使用 100 个复选框，那么您需要声明所有这些复选框，这是一项繁琐的工作，如果您使用输入类型提交，那么它就不起作用。仅当您选择/取消选择复选框时，其他 jquery 才有效。