JSFiddle - React, Tailwind, and code Playground

by windsofhell

HTML

<input type="checkbox" id="test1">test1<br>
<input type="checkbox" id="test2">test2<br>
<input type="checkbox" id="test3">test3<br>
<input type="checkbox" id="test4">test4<br>
    
<button id="button1">Go!</button>

JavaScript

var domHelper = domHelper || {};

domHelper.checkboxController = (function() {

    var _checkBoxList = null,
    
    _getCheckBoxes = function() {
        if(_checkBoxList) {
            return _checkBoxList;
        }
        _checkBoxList = _getElementsByType('checkbox');
        return _checkBoxList;
    },
    
    _getElementsByType = function(typename) {

        var inputs = document.getElementsByTagName('input');

        var elements = [];
        for(var i = 0; i < inputs.length; i++) {
            var item = inputs[i];
            if(item.type == typename) {
                elements.push(item);
            }
        }
        return elements;
    },
    
    _clearCheckBoxArray = function() {
        _checkBoxList = null;
    },
    
    _toggleCheckboxes = function(ignoreCaching) {

        if(ignoreCaching) {
            _clearCheckBoxArray();
        }

        var checkboxes = _getCheckBoxes();

        for(var i = 0; i < checkboxes.length; i++) {
            var item = checkboxes[i];
            if(item.checked) {
                item.nextSibling.nodeValue = item.id + " [checked]"
            } else {
                item.nextSibling.nodeValue = item.id;
            }
        }
    };
    
    return {
        toggleCheckboxes : _toggleCheckboxes
    };

})();


var controller = domHelper.checkboxController,            
                 button = document.getElementById('button1');
                
button.onclick = function() {                
   controller.toggleCheckboxes();    
}