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  

 

8 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); “

  4. Rajkumar says:
    February 9, 2011 at 4:02 pm

    Thanks a lot buddy!

  5. Abdul Azeez says:
    March 7, 2011 at 11:26 am

    Hi,
    Over here you have manually defined 1 to 10 checkboxes,but if what when these 1 to 10 checkboxes or many are retrieved from database as per the ResultSet in jsp page.

  6. Jesu says:
    June 30, 2011 at 3:14 pm

    Thanks

  7. Jesi says:
    June 30, 2011 at 3:18 pm

    Thanks a lot.. We can Use thz coding for check & Uncheck ..Try it .. Gud Luck Frds

    <SCRIPT LANGUAGE=\"JavaScript\">
    function checkAll(field)
    {
    for (i = 0; i < field.length; i++)
    field[i].checked = true ;
    }

    function uncheckAll(field)
    {
    for (i = 0; i < field.length; i++)
    field[i].checked = false ;
    }
    </script>

    Here is the HTML:

    <form name=\"myform\" action=\"checkboxes.asp\" method=\"post\">
    <b>Your Favorite Scripts & Languages</b><br>
    <input type=\"checkbox\" name=\"list\" value=\"1\">Java<br>
    <input type=\"checkbox\" name=\"list\" value=\"2\">Javascript<br>
    <input type=\"checkbox\" name=\"list\" value=\"3\">Active Server Pages<br>
    <input type=\"checkbox\" name=\"list\" value=\"4\">HTML<br>
    <input type=\"checkbox\" name=\"list\" value=\"5\">SQL<br>

    <input type=\"button\" name=\"CheckAll\" value=\"Check All\"
    onClick=\"checkAll(document.myform.list)\">
    <input type=\"button\" name=\"UnCheckAll\" value=\"Uncheck All\"
    onClick=\"uncheckAll(document.myform.list)\">
    <br>
    </form>

  8. Jesu says:
    July 1, 2011 at 5:29 pm

    Thanks.. Its very useful

Leave a Reply

Security Code:

 

  Random Post