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

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 was my mistake:

Any suggestion would be great.

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

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 was my mistake:

Any suggestion would be great.

• javascript
• php
• html
• jquery
• dom-events

• See in the onclick function i send the form name through parameter onclick="javascript:checkAll('myform', true);"> – Vignesh Pichamani Commented Jul 5, 2013 at 7:52
• 1 With or without jQuery ? With jQuery it's very easy $("#formid input[type='checkbox']").attr("checked","checked"); And $("#formid input[type='checkbox']").removeAttr("checked"); – Ricola3D Commented Jul 5, 2013 at 7:54
• @Ricola3D Without jquery ? – Vignesh Pichamani Commented Jul 5, 2013 at 7:55
• 1 Syntax is incorrect, it should be document.forms[formName].getElementsByTagName("inputs"); – Mark Walters Commented Jul 5, 2013 at 7:56
• 1 What version of firefox are you using? document[formname].getElementsByTagName('input') works fine for me – MrCode Commented Jul 5, 2013 at 8:01

6 Answers 6

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

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

  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

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

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

Try this:

function checkAll(formname, checktoggle)
{
    var checkboxes = new Array();

    checkboxes = document.form.myform.getElementsByTagName('input');

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

For specific checkboxes, you can use this:

function checkBoxes(pForm, boxName) {

for (i = 0; i < pForm.elements.length; i++)
    if (pForm.elements[i].name == boxName)
        pForm.elements[i].checked = pForm.elements[i].checked ? false : true;

}