Web Programming: Javascript Check, Uncheck All Checkboxes

This is very common for us providing user list of choices and let them select their preferences from given choices. This kind of script is also needed in admin side for update and delete records.
Here I am providing JavaScript for doing check all/ Uncheck all and validation script after submitting form.

Page: select_unselect_all_checkbox.php

PHP and HTML code for check and uncheck all:

<?php
// In PHP you will access your check list array like this-
//print_r ($_POST[‘checkList’]);
?>
<html>

<head>
<title>Select, Unselect All Checkboxs </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript” src=”check_all.js”></script>
</head>
<body>

<form name=”frm1″ id=”frm1″ action=”testpage.php” method=”post”
onsubmit=”javascript:return submitIt(‘frm1’)”>

CheckALL: <input type=”checkbox” name=”checkAll” value=”Comfortable with”
onclick=”javascript:check_all(‘frm1’, this)”  >
<br />
<input name=”checkList[]” type=”checkbox” value=”PHP”  > PHP<br />
<input name=”checkList[]” type=”checkbox” value=”CSS” > CSS  <br />
<input name=”checkList[]” type=”checkbox” value=”Javascript” > Javascript      <br />
<input name=”checkList[]” type=”checkbox” value=”Ajax” > Ajax                 <br />

<input type=”submit” name=”submit1″ />

</form>

</body>
</html>

Page: check_all.js

JavaScript code for doing CheckAll/UnCheck All. also included is validation code for Check/UnCheck All.

function check_all(frm, chAll)
{
comfList = document.forms[frm].elements[‘checkList[]’];

checkAll = (chAll.checked)?true:false; // what to do? Check all or uncheck all.

// Is it an array
if (comfList.length) {
if (checkAll) {
for (i = 0; i < comfList.length; i++) {
comfList[i].checked = true;
}
}
else {
for (i = 0; i < comfList.length; i++) {
comfList[i].checked = false;
}
}
}
else {
/* This will take care of the situation when your
checkbox/dropdown list (checkList[] element here) is dependent on
a condition and only a single check box came in a list.
*/
if (checkAll) {
comfList.checked = true;
}
else {
comfList.checked = false;
}
}
return;
}

// validate data
function submitIt(frmName)
{
var comfList = document.forms[frmName].elements[“checkList[]”];

if (comfList.length) {

var selected = false;
for (var i=0; i < comfList.length; i++) {

if (comfList[i].checked) {
selected = true;  // is any checkbox selected/checked.
break;
}
}
if (! selected) {
alert(‘Please check your comfortability list.’);
return false;
}
else {
document.forms[frmName].submit();
return true;
}
}
else {

if (comfList.checked) {
document.forms[frmName].submit();
return true;
}
else {
alert(‘Please check your comfortability list.’);
return false;
}

}
}

Here you got a complete code that includes PHP, HTML and JavaScript for Check/Uncheck All. JavaScript used is a plain JavaScript (and not any framework) for validating check All/Uncheck all.

source: satya-weblog.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s