JSFiddle - React, Tailwind, and code Playground

by anubhavranjan

HTML

<input type='checkbox' name='Name1' class='songItem' value='1' />
<input type='checkbox' name='Name2' class='songItem' value='2' />
<input type='checkbox' name='Name3' class='songItem' value='3' />
<input type='checkbox' name='Name4' class='songItem' value='4' />
<input type='hidden' id='selectSongsHidden' />
<input type='button' id="btn" value="button" />

JavaScript

var selectedSongValues = [];
var selectedSongsString = ""; // for comma-separated values
function GetSelectedSongs() {
    var songs = $('.songItem');
    var selectedSongs = [];
    for (var i = 0; i < songs.length; i++) {
        var checked = $(songs[i]).is(':checked');
        if (checked) {
            selectedSongs.push(songs[i]);
        }
    }
    for (var j = 0; j < selectedSongs.length; j++) {
        selectedSongValues.push($(selectedSongs[j]).val());
        selectedSongsString += $(selectedSongs[j]).val() + ",";
    }
    $('#selectSongsHidden').val(selectedSongsString);
    alert(selectedSongsString);
}

$("#btn").click(function () {
    GetSelectedSongs();
});