JSFiddle - React, Tailwind, and code Playground

HTML

<form id='checkboxes'>
    <input type='checkbox' data-group='1' name='box1' value="dsfs"/>
    <input type='checkbox' data-group='1' name='box2' />
    <input type='checkbox' data-group='1' name='box3' />
    
    <input type='checkbox' data-group='2' value='' name='box4' />
    <input type='checkbox' data-group='2' value='' name='box5' />
    
    <input type='checkbox' data-group='3' name='box6' />
    <input type='checkbox' data-group='3' name='box7' />
    <input type='checkbox' data-group='3' name='box8' />
    <input type='checkbox' data-group='3' name='box9' />
</form>

JavaScript

var checkboxes = {
    group1:{},
    group2:{},
    group3:{}
};

//setup initial checkboxes:
$("#checkboxes input[type='checkbox']:checked").each(function() {
    var $this = $(this);
    checkboxes['group'+$this.data('group')][$this.attr('name')] = $this.val();
});


//manages future changes.
$("#checkboxes").delegate("input[type='checkbox']", 'change', function() {
    var $this = $(this);

    if ($this.prop('checked')) {
        checkboxes['group'+$this.data('group')][$this.attr('name')] = $this.val();
    } else {
        delete checkboxes['group'+$this.data('group')][$this.attr('name')];
    }

});