jquery multiple checkboxes array

Question

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

How I can make an array with values of checkboxes that are checked?

NOTE: (IMPORTANT) I need an array like [1, 2, 3, 4, 5] and not like ["1", "2", "3", "4", "5"] .
NOTE: There are around 50 checkboxes.

Can someone help me? Please!

Thank you!

• Duvrai: Possible duplicate of Getting all selected checkboxes in an array

Answer 1

var checked = []
$("input[name='options[]']:checked").each(function ()
{
 checked.push(parseInt($(this).val()));
});

Answer 2

You can use $.map() (or even the .map() function that operates on a jQuery object) to get an array of checked values. The unary (+) operator will cast the string to a number

var arr = $.map($('input:checkbox:checked'), function(e,i) {
 return +e.value;
});
console.log(arr);

Here's an example

• CyberJunkie: Thanks for sharing this! Do you know how to add the checked values to an input not span? I tried $('#test').val(arr.join(','));
• Jason C: You can shorten it even more e.g. var arr = $.map($('input:checkbox:checked'), (e) => +e.value);

Answer 3

var checkedString = $('input:checkbox:checked.name').map(function() { return this.value; }).get().join();

Answer 4

This way will let you add or remove values when you check or uncheck any checkbox named as options[]:

var checkedValues = [];
$("input[name='options[]']").change(function() {
 const intValue = parseInt($(this).val());
 if ($(this).is(':checked')) {
 checkedValues.push(value);
 } else {
 const index = checkedValues.indexOf(value);
 if (index > -1) {
 checkedValues.splice(index, 1);
 }
 }
 });

Answer 5

If you have a class for each of your input box, then you can do it as

 var checked = []
 $('input.Booking').each(function ()
 {
 checked.push($(this).val());
 });

Answer 6

A global function that can be reused:

function getCheckedGroupBoxes(groupName) {
 var checkedAry= [];
 $.each($("input[name='" + groupName + "']:checked"), function () {
 checkedAry.push($(this).attr("id"));
 });
 return checkedAry;
}

where the groupName is the name of the group of the checkboxes, in you example :'options[]'

Answer 7

Pure javascript answer

const checked = Array.from(
 document.querySelectorAll(`input[name=myCheckboxGroup]:checked`)).map(node=>node.value);