JSFiddle - React, Tailwind, and code Playground

HTML

<label for="A">
    <input id="A" name="test" value="A" type="checkbox" />A</label>
<label for="B">
    <input id="B" name="test" value="B" type="checkbox" />B</label>
<br />
<label for="C">
    <input id="C" name="test" value="C" type="checkbox" />C</label>
<label for="D">
    <input id="D" name="test" value="D" type="checkbox" />D</label>
<br />
<label for="E">
    <input id="E" name="test" value="E" type="checkbox" />E</label>
<label for="F">
    <input id="F" name="test" value="F" type="checkbox" />F</label>
<br />
<input type="button" id="save" value="Save" />
<input type="button" id="show" value="Show" />

JavaScript

jQuery(function () {
    var checked = 'A,B,D',
        checkedArray = checked.split(',');
    for (var i = 0, j = checkedArray.length; i < j; i++) {
        jQuery('input[name="test"][value="' + checkedArray[i] + '"]').prop('checked', true);
    }
    jQuery('#show').click(function () {
        alert(checked);
    });
    jQuery('#save').click(function () {
        checked = '';
        jQuery('input[name="test"]:checked').each(function () {
            checked = checked ? checked + ',' + jQuery(this).val() : jQuery(this).val();
        });
    });
});