使用 Javascript（和 PHP）检查所有 HTML 复选框（数组）答案

【问题标题】：Getting All HTML Checkboxes (Array) Checked with Javascript (and PHP)使用 Javascript（和 PHP）检查所有 HTML 复选框（数组）
【发布时间】：2015-01-16 17:01:45
【问题描述】：

我一直在寻找这个几个小时没有运气。这似乎应该很容易，但我显然忽略了一些东西。

我有一个表格，每一行都在每个单元格中显示信息。在每一行的末尾，都有一个带有复选框的附加单元格。复选框是一个数组，每个复选框的值都是 PHP 的内爆数组。见下文：

HTML/PHP
--------
(...some html code...)
<form method="post" action="the-next-page.php">
  <table>
    <tr>
    <?php
    (...some php SQL query code...)
    while ($row = oci_fetch_array($result)) {
    ?>
      <td><input type="text">Name</td>
      <td><input type="text">City</td>
      <td><input type="checkbox" name="checkGroup[]" value="<?php implode(":",$someArrayvariable) ?>"></td>
    <?php
    }
    ?>
    </tr>
    <tr>
      <td><input type="submit" value="submit"></td>
    </tr>
  </table>
</form>
....
</html>

将内爆值传递到下一页可以正常工作。没问题。

我一直在尝试创建一个 javascript 函数来检查此表单中的所有框，或者在复选框组的名称下，或者我可以通过单击按钮来检查它们。我尝试了以下变体但没有成功：

HTML (On the top of the same script as above)
----
<button name="checkAll" onclick="checkAll()">Check All</button>

Javascript (On the bottom of the same script as above)
----
<script type="text/javascript">
function checkAll() {
    var checks = document.getElementByName("checkGroup");
    for (var i=0; i < checks.length; i++) {
        checks[i].checked = true;
    }
}
</script>

我不知道我做错了什么。我知道这个问题的变体已经被问过很多次了，但我似乎没有得到任何结果。我猜是因为我的复选框名称是一个数组（checkGroup[] ???）。

当我单击按钮检查表单中的所有复选框时，什么也没有发生。

有什么想法吗？提前致谢。

-安东尼

【问题讨论】：

getElementByName 应该是 getElementsByName，缺少一个“s”。
@JesseKernaghan +1，正要这么说！ ;P

标签： javascript html arrays function checkbox

【解决方案1】：

您可以使用 JQuery 让自己更轻松。

我还将为每个复选框输入分配一个通用类名，然后在 Javascript（使用 JQuery）中：

$(".classname").each(function() {
    $(this).prop("checked",true);
});

我还会给 Check All 按钮一个唯一的类/ID，这样你就可以做到这一点

$(document).ready(function() {
    $("#allcheckboxid").on("click",function() {
              $(".classname").each(function() {
                     $(this).prop("checked",true);
              });
    });
})

【讨论】：

【解决方案2】：

两件小事：

function checkAll() {
    var checks = document.getElementsByName("checkGroup[]");
    for (var i=0; i < checks.length; i++) {
        checks[i].checked = true;
    }
}

getElementByName 应该是 getElementsByName，checkGroup 应该是 checkGroup[]。除此之外，您的代码应该很好用！

【讨论】：

【解决方案3】：

尝试这种方式获取所有选中的复选框元素

<button name="checkAll" onclick="checkAll()">Check All</button>

<script type="text/javascript">
  function checkAll() {
   var checkboxes = document.getElementsByName('checkGroup[]');
   var checkboxesChecked = [];
   for (var i=0; i<checkboxes.length; i++)
  {
    if (checkboxes[i].checked) {
    checkboxesChecked.push(checkboxes[i]);
  }
 }
 return checkboxesChecked.length > 0 ? checkboxesChecked : null;
 }
</script>

【讨论】：