JSFiddle - React, Tailwind, and code Playground

HTML

<div align="center" id="checkboxes">
<input type="checkbox" name="startall" data-name="AppleBallCat" class="check" id="check" value="all"> All &nbsp;&nbsp;&nbsp;
<input type="checkbox" name="stopall" data-name="Nothing" 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" class="check" checked="checked"  id="check" value="b"> Ball 
    &nbsp;&nbsp;&nbsp;
<input type="checkbox" name="cat" data-name="Cat" class="check" id="check" value="c"> Cat &nbsp;&nbsp;&nbsp;
</div>


<input type="text" name="policyName" id="policyName" title="Policy Name" class="cpolicyname" value="Start" readonly="readonly" >

<input type="text" name="features" title="Policy Features" class="cfeatures" id="features" readonly="readonly" size="60"></td>

JavaScript

$(document).ready(function() {

    // cache features
    var $features = $('#features');
    // cache policyname
    var $policy = $("#policyName");
    // cache all/stopall
    var $ss = $('[name="startall"],[name="stopall"]');
    // cache all others
    var $checkboxes = $('input[type="checkbox"]').not($ss);

    // function to update text boxes


    function updateText() {
        var policyName = 'Start';
        var features = '';

        $checkboxes.filter(':checked').each(function(i, v) {
            policyName += $(v).val();
            features += $(v).data('name');
        });
        $policy.val(policyName);
        $features.val(features);
    }

    $checkboxes.on('change', function() {
        updateText();
        // check startall if all three boxes are checked
        if ($checkboxes.filter(':checked').length == 3) {
            $('input[name="startall"]').prop('checked', true).change()
        };
    });

    $('input[name="startall"]').on('change', function() {
        $checkboxes.prop({
            'checked': this.checked,
            'disabled': false
        });
        this.checked ? $policy.val("Start All") : $policy.val("");
        this.checked ? $features.val("Start All") : $features.val("");
    });

    $('input[name="stopall"]').on('change', function() {
        $checkboxes.add('[name="startall"]').prop({
            'checked': false,
            'disabled': this.checked
        });
        this.checked ? $policy.val("Stop All") : $policy.val("");
        this.checked ? $features.val("Stop All") : $features.val("");
    });
    // update textboxes
    updateText();
});