JSFiddle - React, Tailwind, and code Playground

HTML

<form>    
    <p><input type="checkbox" name="fruits" value="apple" /> Apple</p>
    <p><input type="checkbox" name="fruits" value="banana" /> Banana</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 = {};
    obj.fruits = $('input[name=fruits]:checked').map(function(){
        return  this.value;
    }).get();
    
    console.log(obj);
});