JavaScript – Select all checkboxes

Select check boxes all and unchecks all check boxes, this is example to selecting single check box with multiple checkbox and single check box selects all checkbox buttons.

demo

<html>
<head>
<title>JavaScript - Select All checkbox in form</title>
<script>
var fieldName='chkName';

function selectall(){
  var i=document.frm.elements.length;
  var e=document.frm.elements;
  var name=new Array();
  var value=new Array();
  var j=0;
  for(var k=0;k<i;k++)
  {
    if(document.frm.elements[k].name==fieldName)
    {
      if(document.frm.elements[k].checked==true){
        value[j]=document.frm.elements[k].value;
        j++;
      }
    }
  }
  checkSelect();
}
function selectCheck(obj)
{
 var i=document.frm.elements.length;
  for(var k=0;k<i;k++)
  {
    if(document.frm.elements[k].name==fieldName)
    {
      document.frm.elements[k].checked=obj;
    }
  }
  selectall();
}

function selectallMe()
{
  if(document.frm.allCheck.checked==true)
  {
   selectCheck(true);
  }
  else
  {
    selectCheck(false);
  }
}
function checkSelect()
{
 var i=document.frm.elements.length;
 var berror=true;
  for(var k=0;k<i;k++)
  {
    if(document.frm.elements[k].name==fieldName)
    {
      if(document.frm.elements[k].checked==false)
      {
        berror=false;
        break;
      }
    }
  }
  if(berror==false)
  {
    document.frm.allCheck.checked=false;
  }
  else
  {
    document.frm.allCheck.checked=true;
  }
}
</script>
</head>

<body>
<form name="frm">
select all :<input type="checkbox" name="allCheck" onClick="selectallMe()">
<hr><br>
1  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
2  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
3  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
4  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
5  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
6  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
7  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
8  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
9  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
10 :<input type="checkbox" name="chkName" onClick="selectall()"><br>
</form>
</body>
</html>
Bookmark  

 

3 Responses to “JavaScript – Select all checkboxes”

  1. IRFAN ALI says:
    April 23, 2009 at 5:17 pm

    Hi
    When i run this code on my PC then this is’t working.
    How ever here on the website it is working fine, so please check it.
    Thanks

  2. john says:
    June 1, 2009 at 11:22 am

    Hi,

    To work this code you need to add the single quotes to the ‘chkName’
    Just replace the below code

    var fieldName=‘chkName’;

    to………

    var fieldName=’chkName’;

  3. karthik says:
    May 26, 2010 at 11:48 am

    I think there is no much use of
    ”
    if(document.frm.allCheck.checked==true)
    {
    selectCheck(true);
    }
    else
    {
    selectCheck(false);
    }
    ”
    this check, instead we can directly pass the value directly
    ” selectCheck(document.frm.allCheck.checked); “

Leave a Reply

Security Code:

 

  Random Post