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

编程入门行业动态更新时间:2024-10-23 21:40:26

本文介绍了在提交表单之前，如何要求至少选中一个复选框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我有一个包含多个复选框的列表.用户可以检查所有这些，但至少应该检查一个以允许表单提交.我如何执行该要求?

I have a list of multiple check boxes. The user can check all of them, but at least one should be checked to allow form submission. How can I enforce that requirement?

推荐答案

这是一个使用 jquery 和您的 html 的示例.

Here's an example using jquery and your html.

<html> <head> <script src="ajax.googleapis/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>