JSFiddle - React, Tailwind, and code Playground

by turiyag

HTML

<h2>Console</h2>
        <div id="console">

        </div>
        <div id="content">
            <form>
                <input class="checkbox_all" type="checkbox" id="all" /><label for="all">All animals are present</label>
                <input class="table_checkbox" type="checkbox" id="cat" /><label for="cat">Cat</label>
                <input class="table_checkbox" type="checkbox" id="dog" /><label for="dog">Dog</label>
                <input class="table_checkbox" type="checkbox" id="cow" /><label for="cow">Cow</label>
                <input class="table_checkbox" type="checkbox" id="chicken" /><label for="chicken">Chicken</label>
            </form>
        </div>

CSS

div {
    border: 1px solid black;
}
#console {
    background: #DDF;
}
#console h2 {
    font-size: 1.5em;
}

JavaScript

function log(msg) {
			$("#console").append("<pre>" + msg + "</pre>");
		}
		
		function showSelected() {
			var sel = selected();
			$("#console").empty();
			$("#console").append("{<br />");
			$.each(sel,function(index,obj) {
				$("#console").append(index + ",<br />");
			});
			$("#console").append("}");
		}

		function selected() {
			var ret = {};
			$.each($(".table_checkbox"),function(index,checkbox) {
				if($(checkbox).prop("checked")) {
					ret[$(checkbox).prop("id")] = true;
				}
			});
			return ret;
		}

		$(function() {
			$(".checkbox_all").click(function() {
				$.each($(".table_checkbox"),function(index,checkbox) {
					$(checkbox).prop("checked", $(".checkbox_all").prop("checked"));
				});
				showSelected();
			});
			$(".table_checkbox").click(function() {
				showSelected();
			});
		});