JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<div align="center" id="checkboxes">
<input type="checkbox" name="startall" data-name="Startall" class="check" id="check" value="all"> All &nbsp;&nbsp;&nbsp;
<input type="checkbox" name="stopall" data-name="Stopall" class="check" id="check" value="stopall"> STOPall &nbsp;&nbsp;
<input type="checkbox" name="apple" data-name="Apple" class="check" id="check" value="a"> Apple &nbsp;&nbsp;&nbsp;
<input type="checkbox" name="ball" data-name="Ball" disabled="disabled" checked="checked"  id="check" value="b"> Ball 
    &nbsp;&nbsp;&nbsp;
<input type="checkbox" name="cat" data-name="Cat" class="check" id="check" value="a"> Cat &nbsp;&nbsp;&nbsp;
<input type="checkbox" name="dog" data-name="Dog" checked="checked" disabled="disabled"  id="check" value="d"> Dog 
    &nbsp;&nbsp;&nbsp;
<input type="checkbox" name="elephant" data-name="Elephant" disabled="disabled" checked="checked"  id="check" value="e"> 
    Elephant &nbsp;&nbsp;&nbsp;
</div>
<input type="textbox" id="textbox" />

JavaScript

$(document).ready(function() {
    $('[name="apple"], [name="cat"]').prop('checked', true);

    $('[name="startall"]').on('click', function() {
        var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
        if (this.checked) {
            $checkboxes.prop({
                checked: true,
                disabled: false
            });
            $('#textbox').val( $(this).attr('data-name'));
        }
        else{
             $checkboxes.prop({
                checked: false
            });
             $('#textbox').val('');
        }
    });

    $('[name="stopall"]').on('click', function() {
        var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
        if (this.checked) {
            $checkboxes.prop({
                checked: false,
                disabled: true
            });
            $('#textbox').val( $(this).attr('data-name'));
        }
        else{
             $checkboxes.prop({
                disabled: false
            });
            $('#textbox').val('');
        }
    });
});