JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="check">
    <p><input type="checkbox" value="Name" id="name" checked /> <label for="name">Name</label></p>  
    <p><input type="checkbox" value="Reference " id="reference" checked /> <label for="reference">Reference</label></p>
<p><input type="checkbox" value="all" id="all" /> <label for="all">All</label></p>    
</div>

<div id="nametxt"> Show Name TEXT </div>
<div id="referencetxt"> Show Ref TEXT </div>

JavaScript

function getStorage(key_prefix) {
    // this function will return us an object with a "set" and "get" method
    // using either localStorage if available, or defaulting to document.cookie
    if (window.localStorage) {
        // use localStorage:
        return {
            set: function(id, data) {
                localStorage.setItem(key_prefix+id, data);
            },
            get: function(id) {
                return localStorage.getItem(key_prefix+id);
            }
        };
    } else {
        // use document.cookie:
        return {
            set: function(id, data) {
                document.cookie = key_prefix+id+'='+encodeURIComponent(data);
            },
            get: function(id, data) {
                var cookies = document.cookie, parsed = {};
                cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) {
                    parsed[key] = unescape(value);
                });
                return parsed[key_prefix+id];
            }
        };
    }
}

jQuery(function($) {
    // a key must is used for the cookie/storage
    var storedData = getStorage('com_mysite_checkboxes_'); 
    
    $('div.check input:checkbox').bind('change',function(){
        $('#'+this.id+'txt').toggle($(this).is(':checked'));
        // save the data on change
        storedData.set(this.id, $(this).is(':checked')?'checked':'not');
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked') $(this).attr('checked', 'checked');
        if (val == 'not') $(this).removeAttr('checked');
        if (val) $(this).trigger('change');
    });
    
   $('#all')
        .change(function () {
        var that = this
        $('div.check input:checkbox')
            .each(function () {
            this.checked = that.checked
        }).trigger('change')
    })    
    
});