JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<input type="checkbox" name="test" value="1" id="c1"/> 1 <br/>
<input type="checkbox" name="test" value="2" id="c2"/> 2 <br/>
<input type="checkbox" name="test" value="3" id="c3"/> 3 <br/>
<input type="checkbox" name="test" value="4" id="c4"/> 4 <br/>
<input type="checkbox" name="test" value="5" id="c5"/> 5 <br/>
<input type="checkbox" name="test" value="6" id="c6"/> 6 <br/>
<input type="checkbox" name="test" value="7" id="c7"/> 7 <br/>

<!--output area for DEMO purposes only -->
<pre class="out"></pre>

JavaScript

$(':checkbox[name=test]').on('change', function() {
    var assignedTo = $(':checkbox[name=test]:checked').map(function() {
        return this.id;
    })
    .get();

    //Out for DEMO purposes only 
    $('pre.out').text( JSON.stringify( assignedTo ) );
});