Javascript check all and uncheck all for checkbox

Question

<script type="text/javascript">
function checkAll(formname, checktoggle)
{
     var checkboxes = new Array();
      checkboxes = document[formname].getElementsByTagName('input');
      for (var i = 0; i < checkboxes.length; i++) {
          if (checkboxes[i].type === 'checkbox') {
               checkboxes[i].checked = checktoggle;
          }
      }
}
</script>

<form name="myform">
<li>
   <label class="cba">
         <a href="javascript:void();" onclick="javascript:checkAll('myform', true);">Check All</a> | 
         <a href="javascript:void();" onclick="javascript:checkAll('myform', false);">UnCheck All</a>
   </label>
</li>
<li>
    <input class="cba" type="checkbox" name="content1" value="1"<?php checked('1', $slct); ?>/>
</li>
<li>
    <input class="cbc" type="checkbox" name="content2" value="2"<?php checked('2', $copy); ?>/>
</li>
<li>
    <input class="cbx" type="checkbox" name="content3" value="3"<?php checked('3', $cut); ?>/>
</li>
</form>

Hi all I have made the toggle option for the checkbox check all and uncheck all. Still now Check all and uncheck all is not working I get the error in console while viewing in firebug. Here is the screenshot i attached. I am not sure what i did mistake.

Any Suggestion would be great.

Thanks, vicky

Solution 1

Your syntax is incorrect. Your missing the .forms so it should look like this

document.forms[formName].getElementsByTagName("input");

Solution 2

Javascript function to toggle (check/uncheck) all checkbox.

function checkAll(bx)
{
 var cbs = document.getElementsByTagName('input');
 for(var i=0; i < cbs.length; i++)
 {
    if(cbs[i].type == 'checkbox')
    {
        cbs[i].checked = bx.checked;
     }
 }
}

Solution 3

  function checkAll(formname, checktoggle)
    {
        var checkboxes = new Array();
        checkboxes = document.forms[formname].getElementsByTagName('input');

        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type === 'checkbox') {
                checkboxes[i].checked = checktoggle;
            }
        }
    }
</script>

Finally based on @Mark Walters Suggestion I Correct the problem. Here is the One I changed based on his suggestion. Thanks for all your Help. Happy Day

Solution 4

function checkAll(bx) {
  var cbs = document.getElementsByTagName('input');
  for(var i=0; i < cbs.length; i++) {
    if(cbs[i].type == 'checkbox') {
    cbs[i].checked = bx.checked;
   }
 }
}

Have that function be called from the onclick attribute of your checkbox to check all.

<input type="checkbox" onclick="checkAll(this)">

View more solutions

Comments

[Jamiec]

This will get all checkboxes on the page instead of just those within a specified form though.

[Mark Walters]

@Jamiec Thanks, I make too many typo's. Not really a good attribute for a coder! :)

[Leigh McCulloch]

If anyone wants to run this in Chrome's console to check all boxes on a website that hasn't provided a 'check all' button, just simplify the above into the below and then paste it into the Console tab of the Chrome Developers window (get to it by pressing CMD-ALT-I on Mac). var cbs = document.getElementsByTagName('input');for(var i=0; i < cbs.length; i++){if(cbs[i].type == 'checkbox'){cbs[i].checked = true;}}