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.
The topics basically covers how we collect and use all Check boxes array in JavaScript and PHP.
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.
# 1 - by Jayashree
why do you add the last portion in the loop ?It automatically breaks out of the loop even if only one checkbox is selected.
************************
}
else {
if (comfList.checked) {
document.forms[frmName].submit();
return true;
}
else {
alert(‘Please check your comfortability list.’);
return false;
}
}
}
************************
# 2 - by Jayashree
why do you add the last portion in the loop ?It automatically breaks out of the loop even if only one checkbox is selected.************************} else { if (comfList.checked) { document.forms[frmName].submit(); return true; } else { alert(‘Please check your comfortability list.’); return false; } }}************************
# 3 - by j
thank you.
its using document.*formname*.elements[*variable*]
and setting variable = ‘name[]’ with the brackets that finally worked for me.
thanks
-j
# 4 - by j
thank you.its using document.*formname*.elements[*variable*]and setting variable = ‘name[]’ with the brackets that finally worked for me.thanks-j