Check all the checkboxes in the form using javascript in single button click. Recently I have this requirement for one of my project where user want to check all the checkboxes with same value in a webpage. The reason for this was there were over hundreds of checkboxes in a page and it takes fair amount of time to tick them individualy. Sometimes you might come across the same situation and here I explained what I did. This is an easy example to accomplish this by using javascript. I have used very simple javascript to find all the check boxes with same value and check them all whenmaster check box is checked. It will redo the check status on checking and unchecking the master check box.
Place the following javaScript in the head section of the html page. This example can be adopt with jquery and other languages. I have used this in my website.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function checkAll(field) {
for (i = 0; i < field.length; i++)
field[i].checked = true ;
} ;
//field[i].checked = true ;
function uncheckAll(field) {
for (i = 0; i < field.length; i++)
field[i].checked = false ;
}
// End -->
</script>
In the body section you can have many check boxes as you like. When check all button clicked, it will check all the check boxes. When uncheck all button click it will uncheck all the check boxes.
<html> <head> </head> <body> <form id="myform" > <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)"> </form> </body> </html>
Using one button to check and uncheck all the check boxes.
In this example I have used one button to check all check boxes and the text of the button dynamically change when the checkboxes are checked. Please the following javascript in the head section of the HTML page.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function Check(chk) {
if(document.myform.Check_All.value=="Check All"){
for (i = 0; i < chk.length; i++)
// tick all the boxes
chk[i].checked = true ;
document.myform.Check_All.value="UnCheck All";
}
else
{
for (i = 0; i < chk.length; i++)
//uncheck all the boxes
chk[i].checked = false ;
document.myform.Check_All.value="Check All";
}
}
// End -->
</script>
In the body section, place the following html code.
<html> <head> </head> <body> <form name="myform" > <b>Scripts for Web design and programming</b><br> <input type="checkbox" name="check_list" value="1">ASP<br> <input type="checkbox" name="check_list" value="2">PHP<br> <input type="checkbox" name="check_list" value="3">JavaScript<br> <input type="checkbox" name="check_list" value="4">HTML<br> <input type="checkbox" name="check_list" value="5">MySQL<br> <input type="button" name="Check_All" value="Check All" onClick="Check(document.myform.check_list)"> </form> </body>
Check the check box depending on value
Sometimes you would require to check all the boxes got same value and uncheck the boxes got the same value. This can be done on click event using javascript.
<script type="text/javascript">
function chkBoxes (form) {
var state;
for (i=0;i<form.elements.length;i++) {
var obj = form.elements[i];
if ((obj.type == 'checkbox') && (obj.name!= 'master')) {
//this will check the boxes that got value 1
if (obj.value==1) {
state = obj.checked;
// true or false
obj.checked=(state==true)?false:true;
}
}
}
}
</script>
In the form section of the body of the page, put the following html code.
<form id="myform" > <input type="checkbox" name="master" id="master" value="omnipresent" onClick="chkBoxes(this.form);"> Click me, I am master. <input type="checkbox" name="check_1" id="check_1" value="1"> 1 <input type="checkbox" name="check_2" id="check_2" value="2"> 2 <input type="checkbox" name="check_3" id="check_3" value="3"> 3 <input type="checkbox" name="check_4" id="check_4" value="4"> 4 <input type="checkbox" name="check_5" id="check_5" value="5"> 5 </form>
When you check the master check box, it will check the box that got value 1 .
Hope this helps to understand how to work with check boxes.