JSFiddle - React, Tailwind, and code Playground

by clayshannon

HTML

<div id="container1" class="checkboxGroups2Col"></div>
<div id="container2" class="checkboxGroups3Col"></div>
<div id="container3" class="checkboxGroups4Col"></div>
<div id="container4" class="checkboxGroups1Col"></div>
<div id="container5" class="checkboxGroups5Col"></div>
<button id="whatIsSelected">What is Selected?</button>

CSS

.checkboxGroups1Col {
    width: 200px;
    margin-bottom: 10px;
    border: 1px solid orange;
}
.checkboxGroups2Col {
    width: 400px;
    margin-bottom: 10px;
    border: 1px solid orange;
}
.checkboxGroups3Col {
    width: 600px;
    margin-bottom: 10px;
    border: 1px solid orange;
}
.checkboxGroups4Col {
    width: 800px;
    margin-bottom: 10px;
    border: 1px solid orange;
}
.checkboxGroups5Col {
    width: 1000px;
    margin-bottom: 10px;
    border: 1px solid orange;
}
label {
    display: inline-block;
    width: 200px;
}
.selectors {
    border-bottom: orange 1px solid
}

JavaScript

(function ($) {
    $.fn.extend({
        appendAllCheck: function () {
            var selectors = $('<div class="selectors"></div>').appendTo(this)
                .append('<button>Select all</button><button>Deselect all</button>')
            selectors.find('button').click(function () {
                var checked = $(this).text() == 'Select all';
                $(this).closest('.selectors').parent()
                    .find('[name]:checkbox').prop('checked', checked)
                $(this).prop('checked', false)
                return false

            })
            return this
        },
        appendCheckboxes: function (name, labels) {
            var container = this;
            $.each(labels, function (i, l) {
                var label = $.isPlainObject(labels) ? i : l,
                    value = $.isPlainObject(labels) ? l : i;
                $('<label>').append(
                $('<input>', {
                    'type': 'checkbox',
                        'name': name
                }).val(value),
                label).appendTo(container);
            })
            return this;
        },
        checkedBoxes: function () {
            return this.find(':checked').map(function () {
                return $(this).parent().text();
            }).get();
        }
    });
})(jQuery);

$('#container1').appendAllCheck().appendCheckboxes('foo', ['Apple', 'Banana', 'Cranberry', 'Dill']);
$('#container2').appendAllCheck().appendCheckboxes('bar', {
    'Almond': 1,
        'Blueberry': 2,
        'Cherry': 3,
        'Dumpling': 4
});
$('#container3').appendAllCheck().appendCheckboxes('critters', ['Armadillo', 'Baboon', 'Cheetah', 'Duckbilled Platypus', 'Eagle', 'Fox', 'Goose', 'Hyena', 'Iguana', 'Jaguar', 'Komodo Dragon', 'Leopard', 'Mountain Lion', 'Northern Flicker', 'Opossum', 'Porpoise', 'Quail', 'Ring-tailed Monkey', 'Sabre-toothed and/or Siberian Tiger', 'Tasmanian Devil', 'Unicorn', 'Vole', 'Woozel (commonly seen with Heffalumps)', 'X-Ray...