JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<form action="#" method="post">
    <fieldset>
        <legend>Would you like to select, or de-select, all?</legend>
        <label for="selectAll">Select All:</label>
        <input type="checkbox" id="selectAll" name="selectAll" />
        <fieldset id="options">
            <label for="apples">Apples</label>
            <input type="checkbox" name="apples" id="apples" />
            <label for="oranges">Oranges</label>
            <input type="checkbox" name="oranges" id="oranges" />
        </fieldset>
    </fieldset>
</form>

CSS

fieldset {
    width: 80%;
    margin: 1em auto;
    border: 1px solid #ccc;
    padding: 0.5em;
    border-radius: 1em;
}

#options label,
#options input {
    display: inline-block;
}

#options label {
    width: 20%;
    text-align: right;
}

#options input[type=checkbox] {
    margin: 0 55% 0 5%;
}

JavaScript

$('#selectAll').change(
    function(){
        if ($(this).is(':checked')) {
            $('#options').find('input:checkbox').attr('checked',true);  
        }
        else {
            $('#options').find('input:checkbox').removeAttr('checked');  
        }
    });