JSFiddle - React, Tailwind, and code Playground

HTML

<form>    
    <p><input type="checkbox" name="fruits" value="apple" /> Apple</p>
    <p><input type="checkbox" name="name" value="value1" /> Value1</p>
    <p><input type="checkbox" name="name" value="value2" /> Value2</p>
    <p><input type="checkbox" name="fruits" value="strawberry" /> Strawberry</p>
    
    <p>
        <input type="button" id="submitBtn" value="Submit" />
        
        <input type="button" id="selectAll" value="Select all fruits" />
    </p>
</form>

JavaScript

$('#selectAll').click(function() {
    $('input:checkbox').prop('checked', true);
});

$('#submitBtn').click(function() {
    var obj = {};
    $('input[type=checkbox]:checked').each(function() {
        if (!obj.hasOwnProperty(this.name)) {
            obj[this.name] = [this.value]
        } else {
           obj[this.name].push(this.value)
        }
    });    
    console.log(obj);
});