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>

 

9 Responses to “JavaScript – Select all checkboxes”

  1. IRFAN ALI says:

    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:

    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:

    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:

    Thanks a lot buddy!

  5. Abdul Azeez says:

    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. Jesi says:

    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>

  7. Jesu says:

    Thanks.. Its very useful

  8. Josuva M says:

    This code helps me a lot . Thank you very much .

Leave a Reply