如何从html表单中获取多个复选框值

Question

我知道当有多个复选框时，我可以使用 jQuery（ 如何使用 jquery 获取多个复选框值）来获取复选框值，但是我的复选框输入位于 html 表单中，因此这些 jQuery 解决方案不起作用，因为它们都没有得到表单中的复选框值。

我尝试从表单中提取值，但它只是创建了一个奇怪的无线电节点列表，它似乎计算了复选框名称出现在文档中的次数而不是值。

 function validateForm() { var checks = document.forms["TestForm"]["ParticipantSelection[]"]; alert(checks); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <form name="TestForm" action="Video1.php" method="post" onsubmit="return validateForm()"> <table> <tr> <th><img name="<?php echo $valueindicator[0];?>" src="<?php echo $all_four_images[0];?>" height="100"> </th> <th><img name="<?php echo $valueindicator[1];?>" src="<?php echo $all_four_images[1];?>" height="100"> </th> <th><img name="<?php echo $valueindicator[2];?>" src="<?php echo $all_four_images[2];?>" height="100"> </th> </tr> <tr> <th> <input type="checkbox" name="ParticipantSelection[]" value="image1"> </th> <th><input type="checkbox" name="ParticipantSelection[]" value="image2"> </th> <th><input type="checkbox" name="ParticipantSelection[]" value="image3"> </th> </tr> </table> <input type="hidden" name="AnswerCondition" value="BrowserCheckAnswer"> <button type="submit">Continue</button> </form>

但我不知道如何让 js 获取表单输入中内容的值而不是计算其他内容，也不知道如何访问复选框的值

Answer 1

您可以使用jQuery .map()函数来遍历每个选中的checkbox输入类型。 这将返回一个带有selected复选框的对象。 现在，要从jQuery对象中获取数组，我们可以使用.get()方法，如下所示：

尝试这个：

 var validateForm = function() { var checks = $('input[type="checkbox"]:checked').map(function() { return $(this).val(); }).get() console.log(checks); return false; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="TestForm" action="Video1.php" method="post" onsubmit="return validateForm()"> <table> <tr> <th> <input type="checkbox" name="ParticipantSelection[]" value="image1"> </th> <th><input type="checkbox" name="ParticipantSelection[]" value="image2"> </th> <th><input type="checkbox" name="ParticipantSelection[]" value="image3"> </th> </tr> </table> <input type="hidden" name="AnswerCondition" value="BrowserCheckAnswer"/> <button type="submit">Continue</button> </form>

Answer 2

checks是一个类似数组的对象，表示具有该名称的所有元素。

像数组一样循环它。 每个成员都有一个表示值的value属性和一个checked的（布尔）属性，它会告诉你它是否被选中。

Answer 3

 var validateForm = function() { var checks = $('input[type="checkbox"]:checked').map(function() { return $(this).val(); }).get() console.log(checks); return false; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="TestForm" action="Video1.php" method="post" onsubmit="return validateForm()"> <table> <tr> <th> <input type="checkbox" name="ParticipantSelection[]" value="yellow"> </th> <th><input type="checkbox" name="ParticipantSelection[]" value="blue"> </th> <th><input type="checkbox" name="ParticipantSelection[]" value="red"> </th> </tr> </table> <input type="hidden" name="AnswerCondition" value="BrowserCheckAnswer"/> <button type="submit">Continue</button> </form>