JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<div id="mygroup">
   <input type="checkbox" name="mygroup" id="option1" value="1" /><label for="option1">Option 1</label>
   <input type="checkbox" name="mygroup" id="option2" value="2" /><label for="option2">Option 2</label>
   <input type="checkbox" name="mygroup" id="option3" value="3" /><label for="option3">Option 3</label>
</div>

<div>
   <input id="groupval" />
   <button id="set">Set</button>
   <button id="get">Get</button>
</div>

CSS

div { margin: 5px; }

JavaScript

function myGroupVal( val ) {

    if ( typeof(val) != 'undefined' ) {
        
         $('#mygroup')
             .find('input')
                 .removeProp('checked')
                     .filter('[value="'+val+'"]')
                     .prop('checked', true)
                     .end()
                 .end()
             .buttonset('refresh');
        
    } else {
        return $('#mygroup').find(':checked').val();
    }
}

$('#mygroup').buttonset();

$('#get').button().click(function () {
    $('#groupval').val(myGroupVal());
});

$('#set').button().click(function () {
    myGroupVal($('#groupval').val());
});