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.
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

Comments are open for an year period. Please, write here on Facebook page.