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:

<div>
<input type="checkbox" name="options[]" value="1" />
<input type="checkbox" name="options[]" value="2" />
</div>
<div>
<input type="checkbox" name="options[]" value="2" />
<input type="checkbox" name="options[]" value="4" />
<input type="checkbox" name="options[]" value="5" />
</div>
<span></span>

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:

<div>
<input type="checkbox" name="options[]" value="Teamsport" />
<input type="checkbox" name="options[]" value="Individual sport" />
</div>

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.