问题：

如何要求在提交表单之前至少选中一个复选框？

刁英朗

2023-03-14

我有多个复选框的列表。用户可以检查所有表单，但至少应检查其中一个以允许表单提交。我如何执行该要求？

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

共有3个答案

欧金鹏

2023-03-14

这应该是您所需要的，请查看底部的JSFIDLE：

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

狄鸿禧

2023-03-14

选中所有复选框required，并添加一个change侦听器。如果勾选了任何一个复选框，则从所有复选框中删除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');
        }
    });
});

鲜于阳

2023-03-14

下面是一个使用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>

类似资料：

选中复选框后提交表单-教程

问题内容：我正在尝试达到类似于37signals的ta-da列表的效果-我希望我的用户仅通过选中“完成”框即可从列表中检查项目- 换句话说，表单已提交到服务器在复选框上。有谁知道涵盖此类内容的教程，或者可以为我指明正确的方向？谢谢罗布问题答案：如果我正确理解您的问题：您可以使用jQuery和AJAX完成此操作。在第一个示例中，我无需提交整个表单，而仅提交复选框的值：大概您会在服务器端处
JQuery验证至少有一个复选框被选中

我有一个带有一组相关复选框的ASP.NET webform。我想验证当单击提交按钮时，组中至少选中了一个复选框。我尝试过实现两种不同的解决方案，但都没有成功。当我尝试按类名返回选中复选框的长度时，收到0。当我尝试按名称返回ischecked值时，收到false。如果我查看页面的源，复选框具有“checked”属性。有人能检查我的html，让我知道我做错了什么吗？
如何在jQuery中通过循环选择至少3个复选框

我想允许至少3个复选框将检查，我试过下面的代码但它不是很好地工作。 HTML... jQuery 有人请帮助我，我如何选择至少2个复选框？
提交表单后，PHP保持选中复选框

问题内容：大家好，我有一个联系表格，验证码在那里。提交表格后，我想保留支票。我发布了文本框值，它显示正确，但复选框不起作用。这是我的代码。提交表格后如何保留复选框？问题答案：更改至这将使复选框保持选中状态。
如何在OpenAPI中要求至少两个参数中的一个？

我使用的是OpenAPI3，有两个查询参数，其中至少有一个是必需的，但哪个并不重要。这在OpenAPI3中可能吗？就我所见，规范和JSON模式规范中都没有提到它。
在Android MultiSelectListPreference中至少选择一个项目

我现在已经通过互联网搜索了几个小时，到目前为止还没有找到任何实质性的东西。我想做的事情是一个多选择偏好视图，禁用最后一个项目和重新启用它，如果它不再是单独的。我通过到目前为止关于采取超类强制读取私有变量在那里编写我自己的。它正在配置自己的，该

如何要求在提交表单之前至少选中一个复选框？

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档