JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="mango" value="mango" /> <label>MANGO</label><br>
<input type="checkbox" id="santol" value="santol" /> <label>SANTOL</label><br>
<input type="checkbox" id="guava" value="guava" /> <label>GUAVA</label><br>
<input type="checkbox" id="lomboy" value="lomboy" /> <label>LOMBOY</label><br>
<input type="checkbox" id="apple" value="apple" /> <label>APPLE</label><br>
<input type="checkbox" id="orange" value="orange" /> <label>ORANGE</label><br>

<a href='javascript:test();'>click me!</a>

JavaScript

function test()
{
    var idSelector = function() { return this.id; };
    var fruitsGranted = $(":checkbox:checked").map(idSelector).get() ;
    var fruitsDenied = $(":checkbox:not(:checked)").map(idSelector).get() ;
    
    alert("fruitsGranted: " + fruitsGranted  + "\nfruitsDenied: " + fruitsDenied);
}