Question

我有一个包含多个复选框的列表。用户可以检查所有，但至少需要。不确定如何实现这一目标

<p>Box Set 1</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>

Answer 1

这是一个使用jquery和你的html的例子。

<html>
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
$(document).ready(function () {
    $('#checkBtn').click(function() {
      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {
        alert("You must check at least one checkbox.");
        return false;
      }

    });
});

</script>

<p>Box Set 1</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>

<input type="button" value="Test Required" id="checkBtn">

</body>
</html>

Answer 2

这应该有您需要的，请查看底部的jsfiddle：

$(document).ready(function () {
$('#txt').val($("input[type=checkbox]:checked").length);
$('#txt2').val($("input[type=checkbox]").length);

$('input[type=checkbox]').change(function () {
checked = $("input[type=checkbox]:checked").length;
$('#block').show();
$('#block2').hide();
if (checked > 0) {
  $('#block').hide();
  $('#block2').show();
  $('#txt').val(checked);
 }
});
});

http://jsfiddle.net/wpgeek/arEdz/

Answer 3

选中所有复选框required，然后添加一个change listener。如果选中任何一个复选框，请从所有复选框中删除required属性。下面是示例代码。

<div class="form-group browsers">
    <label class="control-label col-md-4" for="optiontext">Select an option</label>
    <div class="col-md-6">
        <input type="checkbox" name="browser" value="Chrome" required/> Google Chrome<br>
        <input type="checkbox" name="browser" value="IE" required/> Internet Explorer<br>
        <input type="checkbox" name="browser" value="Mozilla" required/> Mozilla Firefox<br>
        <input type="checkbox" name="browser" value="Edge" required/> Microsoft Edge
    </div>
</div>

更改监听器：

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

Answer 4

您可以在PHP级别或Javascript级别执行此操作。如果您使用Javascript和/或JQuery，则可以检查并验证是否使用选择器检查了所有复选框...

Jquery还提供了几个验证库。查看：http://jqueryvalidation.org/

使用Javascript验证的问题是它可能被绕过，因此检查服务器也是明智之举。

使用PHP并假设您正在调用PO的示例

<?php
    if( $_GET["BoxSelect"] )
 {
     //Process your form here
     // Save to database, send email, redirect...
} else {

     // Return an error and do not anything
     echo "Checkbox is missing"; 


     exit();
 }
?>

Answer 5

上面接受的解决方案的问题是，不允许表单提交上的else条件（如果选择了一个框），从而阻止表单提交 - 至少在我尝试时。

我发现了另一种解决方案，可以更完整地影响所需的结果恕我直言，这里：

Making sure at least one checkbox is checked

代码如下：

function valthis() {
var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
var isChecked = false;
    for (var i = 0; i < checkBoxes.length; i++) {
        if ( checkBoxes[i].checked ) {
            isChecked = true;
        };
    };
    if ( isChecked ) {
        alert( 'At least one checkbox checked!' );
        } else {
            alert( 'Please, check at least one checkbox!' );
        }   
}

Fiddle

该代码＆amp;通过Vell

回答

Answer 6

使用此功能，您可以选中是否在不同的复选框组或多个复选框中选中了至少一个复选框。

参考：Link

<label class="control-label col-sm-4">Check Box 1</label>
    <input type="checkbox" name="checkbox1" id="checkbox1" value=Male /> Male<br />
    <input type="checkbox" name="checkbox1" id="checkbox1" value=Female /> Female<br />

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox3" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox3" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox1]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 1 can not be null";
        return false;
    }
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>

Answer 7

对于php，当您为多个值使用复选框时，名称始终以[]结尾。我们可以使用它使解决方案更加通用。而且，由于我将错误消息放入了data-message-value-missing属性中，因此我使用：

$form.on('change', 'input[type=checkbox][name$="[]"]', e => {
    const $inputs = $('input[type=checkbox][name="' + e.target.name + '"]');
    const $targetInp = $inputs.filter('[data-message-value-missing]');
    if($inputs.filter(':checked').length) {
        $targetInp.removeAttr('required');
        $form.find('label.error').html('');
    } else {
        $targetInp.attr('required', 'required');
    }
});

要进行此操作，请仅在一个（最后一个）输入上设置数据消息值丢失和必需项：

<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 1"><label>Box 1</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 2"><label>Box 2</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 3"><label>Box 3</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 4" required data-message-value-missing="Select at least one"><label>Box 4</label></li>
</ul>

我排除了处理checkValidity（）等的代码。似乎超出了此问题的范围...

Answer 8

<ul>
    <li><input class="checkboxes" name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
    <li><input class="checkboxes" name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
    <li><input class="checkboxes" name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
    <li><input class="checkboxes" name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>

<script type="text/javascript">
$(document).ready(function(){
    var checkboxes = $('.checkboxes');
    checkboxes.change(function(){
        if($('.checkboxes:checked').length>0) {
            checkboxes.removeAttr('required');
        } else {
            checkboxes.attr('required', 'required');
        }
    });
});
</script>

Answer 9

我已经阅读了一些其他解决方案，但它们都有许多缺点，在我看来，以下一个或几个：

当某个复选框或所有复选框被标记为需要时，或者当复选框被 setCustomValidity 明确标记为无效时，用户代理将就某些特定复选框进行通信。结果让用户感到困惑，因为用户代理会认真地向用户明确传达，用户必须选中那个特定复选框才能继续，这无论如何都不是你想要的——你只是希望用户至少检查组中的任何复选框。
在选中和取消选中复选框时将复选框标记为有效/无效也是一个 UX 死胡同——您无论如何都需要在提交时验证包含这些的表单，即使用户没有触摸任何在尝试提交表单之前的复选框 - 您如何验证表单？根据需要标记复选框以确保在提交表单之前至少选中一个复选框，再次遇到上述问题。

鉴于这些缺点，我使用了以下方法：

form.addEventListener("submit", ev => {
    if(!Array.prototype.some.call(checkboxes(), checkbox => checkbox.checked)) {
        tell_user_they_must_check_some_checkbox(); /// Instead of `setCustomValidity` which we can't use since we don't have a single particular checkbox to flag as invalid, just implement our own notification
        ev.preventDefault(); /// Prevent form submission -- the "submit" event only fires if the form was validated successfully in the first place, so it's up to us to stop the submission (according to our own validation constraints that cannot be expressed with `required` on some form controls).
    }
});

这就是我认为的全部内容。我省略了实际复选框的选择，因为这不是代码试图说明的重点，但是您必须通过实现 checkboxes 来定义要使用上述内容验证的复选框组。它可以是一个生成器函数，也可以只是一个返回数组或一些 HTML 集合的函数。

重要的是，setCustomValidity 根本不能有意义地使用，因为无法将某些组或至少上下文适当的表单控件标记为无效。如果您找到一个，例如某个提交按钮，则 tell_user_they_must_check_some_checkbox 会简化为 setCustomValidity 调用。您仍然需要防止默认，因为在处理“提交”事件之后不会对实际无效的控件进行任何检查，这发生在之前，因此我们需要自己中止提交（如果适用）。

作为给读者的练习，您可以使用某些 data- 属性实现分组，或者通过在 fieldset（或即使是 div 或其他）并检查那些分组 - 就像我说的，您想要选择哪些复选框来验证上述条件，完全取决于表单设计者。您甚至可以对所有分组的复选框使用相同的 name 进行试验，就像使用单选按钮效果良好一样，但这可能会破坏传统的表单提交（多个具有相同名称的复选框可能不会被用户代理序列化为POST 请求，如您所愿）

多个复选框至少需要1个

9 个答案: