Get multiple values out of checkboxes

Question

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.

`.delegate` is deprecated, so you should use `.on` instead. `$('div').on('click', 'input:checkbox', calculate);` — sigh, Oct 21 '17 at 18:37

score 3 · Answer 1 · answered Oct 21 '17 at 18:35

3

There is simply a typo in your code: this:

 return +e.value;

must be

 return e.value;

The prefix + is only defined for numbers, so javascript tries to convert the "Teamsport" into a number - which is NaN (not a number)

answered Oct 21 '17 at 18:35

Oliver Erdmann

361
1
5

ferhado · Accepted Answer · 2017-10-21T18:47:53.093

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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <input type="checkbox" name="options[]" value="1" />
   <input type="checkbox" name="options[]" value="2" />
</div>
<div>
   <input type="checkbox" name="options[]" value="3" />
   <input type="checkbox" name="options[]" value="4" />
   <input type="checkbox" name="options[]" value="5" />
</div>
<span></span>

bhansa · Answer 3 · 2017-10-21T18:43:15.343

Just return the e.value in your map function.

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="options[]" value="Teamsport" />
  <input type="checkbox" name="options[]" value="Individual sport" />
</div>

<span></span>

score 1 · Answer 4 · answered Oct 21 '17 at 18:36

The problem lies here: return +e.value;

+e.value will return NaN for non-number values, in this case, String will be converted to NaN

function calculate() {
  var arr = $.map($('input:checkbox:checked'), function(e, i) {
    return e.value; // +e.value will return NaN for String and non number values
  });
  $('span').text('the checked values are: ' + arr.join(','));
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="options[]" value="abc" />
  <input type="checkbox" name="options[]" value="pqr" />
</div>
<div>
  <input type="checkbox" name="options[]" value="xyz" />
  <input type="checkbox" name="options[]" value="lmn" />
  <input type="checkbox" name="options[]" value="ccc" />
</div>
<span></span>

score 0 · Answer 5 · answered Oct 21 '17 at 18:45

function calculate() {
var arr =[];
$('input:checkbox:checked').each(function() {
    arr.push($(this).val());
});
$('span').text('the checked values are: ' + arr.join(','));
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<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>
<div>
<input type="checkbox" name="options[]" value="Teamsport" />
<input type="checkbox" name="options[]" value="Individual sport" />
</div>
<span></span>

Get multiple values out of checkboxes

5 Answers5