Question

我有一组复选框，必须至少检查一个复选框才能提交表单。为此，我将每个复选框命名为相同的并设置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 />

我必须检查所有三个方框以提交表格:-(

如果这是单选按钮，它可以工作......但我想要至少检查一个或多个方框。

有人可以帮忙吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

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

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

在这种情况下，您可以为select元素提供multiple属性，允许您选择多个选项：

＆＃13;

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

＆＃13;

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

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

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

Answer 3

如果将代码括在表单标记中，并且在执行提交操作时将触发验证，则此方法将起作用。并使用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/

Answer 4

这是我提出的漂亮技巧：

详细说明： https://stackoverflow.com/a/37825072/1479143

小片段：

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

如何为一组复选框使用必需属性？

4 个答案: