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!

1

7 Answers 7

87
var checked = []
$("input[name='options[]']:checked").each(function ()
{
    checked.push(parseInt($(this).val()));
});
Sign up to request clarification or add additional context in comments.

Comments

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

2 Comments

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

Comments

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

Comments

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

Comments

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

Comments

0

Pure javascript answer

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.