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

Question

我已经搜索了几个小时，但没有找到。这看起来应该相当容易，但我显然忽略了一些东西。

我有一个 table，每行显示每个单元格中的信息。在每一行的末尾，都有一个带有复选框的附加单元格。复选框是一个数组，每个复选框的值都是通过 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[] ???).

当我单击按钮选中表单中的所有复选框时，没有任何反应。

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

-安东尼

Answer 1

两件小事：

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

getElementByName 应该是 getElementsByName，checkGroup 应该是 checkGroup[]。除此之外，您的代码应该可以使用了！

Answer 2

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

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

Answer 3

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

我还会为每个复选框输入分配一个通用的 class 名称，因此在 Javascript 中（使用 JQuery）：

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

我也会给“全部选中”按钮一个唯一的 class/id 这样你就可以这样做

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

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

Getting All HTML Checkboxes (Array) Checked with Javascript (and PHP)

html

javascript

arrays

checkbox

function