Question

So I have something like this inside a form

<input type="checkbox" name="arr" value="A" />A
<input type="checkbox" name="arr" value="B" />B
<input type="checkbox" name="arr" value="C" />C
<input type="checkbox" name="arr" value="D" />D
<input type="checkbox" name="arr" value="E" />E
...
<more checkboxes here>
...

In my Javascript I want to create an array that consists the values of boxes that are checked. So if B and D are checked it should be [B, D].

thanks

EDIT: My bad for not including a jQuery tag, but the guy who deleted his answer gave me a nice and short working solution using jQuery:

var valueArray = $('input[type="checkbox"][name="arr"]:checked').map(function() {
    return this.value;
}).get();

Answer 1

Depending on what you’re using it for, it may be enough to just use name="arr[]". When the form is submitted, the server-side will automatically convert the selected checkbox values to an array.

However, if you’re trying to get this array purely in the client-side JavaScript, it’s a little more involved. Try this:

function getCheckedBoxes(name) {
    if( document.querySelectorAll) {
        var qsa = document.querySelectorAll("input[type=checkbox][name='"+name+"']"),
            l = qsa.length, i, out = [];
        for( i=0; i<l; i++) if( qsa[i].checked) out.push(qsa[i].value);
    }
    else {
        var qsa = document.getElementsByTagName('input'), l = qsa.length, i, out = [];
        for( i=0; i<l; i++) {
            if( qsa[i].type == 'checkbox' && qsa[i].name == name && qsa[i].checked)
                out.push(qsa[i].value);
        }
    }
    return out;
};