JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<label>red</label><input type="checkbox" name="colorCheckbox" value="red">
    <label>blue</label><input type="checkbox" name="colorCheckbox" value="blue">

    <div class="red">You have selected <strong>red checkbox</strong></div>
    <div class="blue">You have selected <strong>blue checkbox</strong> </div>

CSS

.red{ display: none;}
.blue{ display: none;}

JavaScript

document.getElementById('checkboxes').addEventListener('change', function(e) {
        var el = e.target;
        var inputs = document.getElementsByTagName('input');
         if (input.checked) {
                    numChecked++;
                }
        // If 'all' was clicked
        if (el.id === 'all') {
        
            // loop through all the inputs, skipping the first one
            for (var i = 1, input; input = inputs[i++]; ) {
            
                // Set each input's value to 'all'.
                input.checked = el.checked;
            }
        }
        
        // We need to check if all checkboxes have been checked
        else {
            var numChecked = 0;
            
            for (var i = 1, input; input = inputs[i++]; ) {
                if (input.checked) {
                    numChecked++;
                }
            }
            
            // If all checkboxes have been checked, then check 'all' as well
            inputs[0].checked = numChecked === inputs.length - 1;
        }
    }, false);

$(document).ready(function(){
        var el = e.target;
        var inputs =  document.getElementsByTagName('input');
        
			$('input[type="checkbox"]').click(function(){
                if($(this).is(":checked"))
				{
                    $("." + $(this).val()).show();
				}
				else{
				    $("." + $(this).val()).hide();
				}
			});
		});