javascript - Get multiple values out of checkboxes

I searched a lot on the internet but I still can't find the right answer to my question. I am trying to "print" all the selected values out of multiple checkboxes on my html-page. However, this works only for integers and not for other values. Right now, I use to following code:

in combination with the following jquery code:

function calculate() {
var arr = $.map($('input:checkbox:checked'), function(e, i) {
    return +e.value;
});
$('span').text('the checked values are: ' + arr.join(','));
}

calculate();
$('div').delegate('input:checkbox', 'click', calculate);

The problem right now, is that I want to see all the values from the checkboxes, however, I do not want them to be integers, but they should have values like:

So that there will be an output like:

the selected values are: Teamsport,Ballsport,etc..

I think the problem should be in the Jquery code, but I am not very familiar with javascript and jquery, so I hope that someone can help me.

Answer

hier is an example may help you

$(':checkbox').change(function(){
    var liste2 = $(':checkbox:checked').map(function() {

    return this.value;
}).get();
   $('span').text('the checked values are: ' + liste2);
});