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

Question

I've been searching for this for a couple hours with no luck. This seems like it should be fairly easy but I am obviously overlooking something.

I have a table, with each row displaying information in each cell. At the end of each of the rows, there is an additional cell with a checkbox in it. The checkbox is an array, and each checkbox value is an imploded array via PHP. See below:

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>

Passing the imploded values to the next page works fine. No problem there.

I have been trying to create a javascript function to check all of the boxes that are in this form, or under the checkbox group's name, or whatever I can do to check them all with the click of a button. I've tried variations of the following with no success:

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>

I can't figure out what I'm doing wrong. I know that a variation of this question has been asked before many times, but I don't seem to be getting any results. I'm guessing because my checkboxes name is an array (checkGroup[] ???).

When I click the button to check all of the checkboxes in the form, nothing happens.

Any ideas? Thanks in advance.

-Anthony

getElementByName should be getElementsByName, missing an 's'. — Jesse Kernaghan
– Jesse Kernaghan, Commented Jan 16, 2015 at 17:04

Michael Bondi · Accepted Answer · 2015-01-16 17:48:51Z

2

You can use JQuery to make this easier on yourself.

I would also assign a general class name to each checkbox input, so then in Javascript (using JQuery):

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

I would also give the Check All button a unique class/id so you can do this

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

answered Jan 16, 2015 at 17:48

Michael Bondi

3063 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jesse Kernaghan · Accepted Answer · 2015-01-16 17:10:08Z

1

Two minor things:

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

getElementByName should be getElementsByName, and checkGroup should be checkGroup[]. Other than that your code should be good to go!

answered Jan 16, 2015 at 17:10

Jesse Kernaghan

4,6542 gold badges20 silver badges25 bronze badges

Comments

A l w a y s S u n n y · Accepted Answer · 2015-01-16 17:12:18Z

1

Try this way to get all checked check box elements

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

answered Jan 16, 2015 at 17:12

A l w a y s S u n n y

38.8k9 gold badges68 silver badges120 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related