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

var fruits = [];


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

$('#submitBtn').click(function() {
    $("input[name=fruits]:checked").each(function() {
         var fruit = $(this).val();
        fruits.push(fruit);
    });
    
    console.log(fruits);
});