JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<form id='form'>
    <label class='js-only'>
        <input id='remote' type='checkbox'/>
        Check Norris!
    </label>
    
    <hr class='js-only'/>
    
    <label>
        <input type='checkbox'/>
        Check me if you can!
    </label>
    <label>
        <input type='checkbox'/>
        Check me if you can!
    </label>
    <label>
        <input type='checkbox'/>
        Check me if you can!
    </label>
    <label>
        <input type='checkbox'/>
        Check me if you can!
    </label>
</form>

CSS

label{
    display: block;
}

.js-only{
    display: none;
}

.js .js-only{
    display: block;
}

JavaScript

/**
 * @author lottikarotti
 */
(function(global){
    'use strict';

    /** CSS-Klasse .js für Progressive Enhancement */
    document.body.className += ' ' + 'js';

    /**
     * Event-Listener hinzufügen (W3C).
     *
     * @param object   node    Das DOM-Element.
     * @param string   type    Der Event-Typ (click, ..).
     * @param function handler Die Callback-Funktion.
     */
    function _on(node, type, handler){
        node.addEventListener(type, handler);
    }

    /**
     * Event-Listener hinzufügen (ältere Internet Exploder).
     *
     * @param object   node    Das DOM-Element.
     * @param string   type    Der Event-Typ (click, ..).
     * @param function handler Die Callback-Funktion.
     */
    function _onIE(node, type, handler){
        node.attachEvent('on' + type, handler);
    }

    /**
     * Sammlung von Hilfsfunktionen für den bequemen Umgang mit DOM-Elementen.
     */
    var DOMUtil = {
        /**
         * Fügt einen Event-Listener hinzu.
         *
         * @param object   node    Das DOM-Element.
         * @param string   type    Der Event-Typ (click, ..).
         * @param function handler Die Callback-Funktion.
         */
        on: function(node, type, handler){
            DOMUtil.on = global.addEventListener ? _on : _onIE;
            DOMUtil.on(node, type, handler);
        },

        /**
         * Aktualisiert alle Checkboxen im gegebenen Array.
         *
         * @param array nodes   Ein Array mit DOM-Elementen.
         * @param bool  checked Der neue Checked-Status.
         */
        updateChecked: function(nodes, checked){
            var i;
            for(i=0; i<nodes.length; i++){
                if(nodes[i].type === 'checkbox'){
                    nodes[i].checked = checked;
                }
            }
        },

        /**
         * Sucht nach Checkboxen innerhalb des gegebenen DOM-Elements.
         *
         * @param  object node Das DOM-Element das durchsucht werden soll.
        ...