JSFiddle - React, Tailwind, and code Playground

by Pragnesh Chauhan

HTML

<div id="nav">
        <input type="checkbox" class="all" id="all" checked="checked"/> Check/Uncheck all<br />
        <input type="checkbox" name="overlay-1" id="overlay-1" checked="checked"> Overlay 1 <br/>
        <input type="checkbox" name="overlay-2" id="overlay-2" checked="checked"> Overlay 2 <br/>
        <input type="checkbox" name="overlay-3" id="overlay-3" checked="checked"> Overlay 3 <br/>
    </div>

    <div class="overlay-1">Overlay 1 Content</div>
    <div class="overlay-2">Overlay 2 Content</div>
    <div class="overlay-3">Overlay 3 Content</div>

CSS

.hide {display:none;}
   .overlay-1 {background-color:#333; color:#FFF;}
   .overlay-2 {background-color:#666; color:#FFF;}
   .overlay-3 {background-color:#999; color:#FFF;}
   .overlay-1, .overlay-2, .overlay-3 { padding:20px; margin-top:20px;}

JavaScript

$("#overlay-1").change(function() {
        $(".overlay-1").toggleClass("hide", this.unchecked)
    }).change();

    $("#overlay-2").change(function() {
        $(".overlay-2").toggleClass("hide", this.unchecked)
    }).change();

    $("#overlay-3").change(function() {
        $(".overlay-3").toggleClass("hide", this.unchecked)
    }).change();
        
        $('#all').change(function(){
            $('div[class|="overlay"]').toggleClass("hide");   
            var is_checked = $("#all").attr("checked") == "checked" ? true : false;
            $('input:checkbox').attr("checked", is_checked);                        
        }).change();