JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<div id="checkboxes">
    <label>Div 1 A</label>
    <input type="checkbox" value="div1" />
    <br>
        <label>Div 1 B</label>
    <input type="checkbox" value="div1" />
    <br>
        <label>Div 2</label>
    <input type="checkbox" value="div2" />
    <br>
        <label>Div 3 A</label>
    <input type="checkbox" value="div3" />
    <br>
        
        <label>Div 3 B</label>
    <input type="checkbox" value="div3" />
    <br>
</div>
<hr>
<div class="div1" style="opacity:0.5;">div 1 with some text</div>
<div class="div1" style="opacity:0.5;">div 1</div>
<div class="div2" style="opacity:0.5;">A div 2</div>
<div class="div3" style="opacity:0.5;">div 3</div>
<div class="div3" style="opacity:0.5;">div 3 part B</div>

CSS

label {width:60px;font-weight: bold;
display: block;
float: left;}
label:after { content: ": " }

JavaScript

$(function () {

    $('#checkboxes input:checkbox').change(function () {
        
        var selected = new Array();
        
        $('#checkboxes input:checked').each(function () {
            selected.push($(this).attr('name'));
        });
        //get the value of checked boxes
    
        var divs = '.' + $(this).val().toLowerCase();
        if ($(this).is(':checked')) {
            $(divs).fadeTo('fast', 1.0);

        } else {

            $(divs).fadeTo('fast', .5);
        }
    });
});