JavaScript checkbox toggle

Demo shows how to toggle or clear a checkbox group. On button click, all checkboxes in HTML table will change their state. Checkbox group can be defined with any container so it’s not necessary to use a table. This is a really simple JavaScript function with checkbox toggle and clear options.

Toggle
Table 1
Clear
Toggle
Table 2
Clear
Toggle
Table 3
Clear

JavaScript code is split in two functions (or we may say methods): mycheckbox and find_parent. The second one is explained in Find parent node in DOM post. This function has simple task to find a parent node in DOM hierarchy. Toggle and clear buttons are located inside TABLE, so it’s only needed to send theirs reference to find a parent table. After table reference is found, getElementsByTagName will collect all INPUT elements in table. For loop will go through each INPUT element and toggle or clear checkbox state. Here is complete JavaScript code used in this example:

// method definitions
var mycheckbox,
    find_parent;

/**
 * Method toggles or clears checkboxes in table.
 * @param {HTMLElement} btn Clicked button (button should be inside table).
 * @param {String} type Type defines toggle or clear checkboxes.
 */
mycheckbox = function (btn, type) {
    var tbl = find_parent('TABLE', btn),        // parent table
        el = tbl.getElementsByTagName('input'), // input elements 
        i;                                      // loop variable
    // loop through all collected input elements in table
    for (i = 0; i < el.length; i++) {
        // if input element is checkbox
        if (el[i].type === 'checkbox') {
            // toggle or clear checkbox state
            if (el[i].checked || type === 'clear') {
                el[i].checked = false;
            }
            else {
                el[i].checked = true;
            }
        }
    }
};

/**
 * Method returns a reference of the required parent element.
 * @param {String} tag_name Tag name of parent element.
 * @param {HTMLElement} el Start position to search.
 * @return {HTMLElement} Returns reference of the found parent element.
 */
find_parent = function (tag_name, el) {
    // loop up until parent element is found
    while (el && el.nodeName !== tag_name) {
        el = el.parentNode;
    }
    // return found element
    return el;
};

JavaScript code with two functions should be included in page to toggle or clear checkboxes. It is only needed to call mycheckbox function on button click or any other event. Below are HTML lines for toggle and clear buttons used in each table.

<!-- toggle button -->
<input type="button" value="T" onclick="mycheckbox(this, 'toggle')" title="Toggle"/>

<!-- clear button -->
<input type="button" value="C" onclick="mycheckbox(this, 'clear')" title="Clear"/>

Source code of this checkbox toggle demo can be download from “download icon” below post title. I hope you find this mini tutorial useful in working with checkboxes.

3 thoughts on “JavaScript checkbox toggle

Leave a Comment