46
<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!

Dormouse
  • 5,130
  • 1
  • 26
  • 42
user557108
  • 1,195
  • 3
  • 17
  • 26
  • Possible duplicate of [Getting all selected checkboxes in an array](http://stackoverflow.com/questions/590018/getting-all-selected-checkboxes-in-an-array) – Duvrai Dec 30 '15 at 15:51

7 Answers7

87
var checked = []
$("input[name='options[]']:checked").each(function ()
{
    checked.push(parseInt($(this).val()));
});
Dormouse
  • 5,130
  • 1
  • 26
  • 42
58

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

Russ Cam
  • 124,184
  • 33
  • 204
  • 266
  • Thanks for sharing this! Do you know how to add the checked values to an input not span? I tried `$('#test').val(arr.join(','));` – CyberJunkie May 29 '11 at 21:50
  • 2
    You can shorten it even more e.g. `var arr = $.map($('input:checkbox:checked'), (e) => +e.value);` – Jason C Jul 17 '17 at 13:51
3

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);
        }
    }
 });
Pedro Trujillo
  • 1,559
  • 18
  • 19
2
var checkedString = $('input:checkbox:checked.name').map(function() { return this.value; }).get().join();
Ankur
  • 5,086
  • 19
  • 37
  • 62
user2503922
  • 19
  • 1
2

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());
        });
Muhammad Amjad
  • 306
  • 3
  • 9
1

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[]'

Hasan Shouman
  • 2,162
  • 1
  • 20
  • 26
0

Pure javascript answer

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