I have a for loop in php that adds a number of checkboxes on my page that look like this

<input type="checkbox" name="checkbox[]">

I want to use javascript to check which is checked and add value in an Array

var cboxes = document.getElementsByName('checkbox[]');
var len = cboxes.length;
var imageArray = new Array();

for (var i = 0; i < len; i++) {
    if (cboxes[i].checked) {
        imageArray[i] = cboxes[i].value;
    } 
}

If I have 50 boxes and click the checkbox number 2,4 and 6, loops through my array, I get the result.

for(var i = 0; i < imageArray.length; i++){
    gallery.innerHTML += imageArray[i] + "<br>";
}

--

undefined
Correct value
undefined
Correct value
undefined
Correct value

If I check number 1, 2, 3 I get the result

Correct value
Correct value
Correct value

Why do I get undefined when I skip a checkbox? How do I fix it

I have a for loop in php that adds a number of checkboxes on my page that look like this

<input type="checkbox" name="checkbox[]">

I want to use javascript to check which is checked and add value in an Array

var cboxes = document.getElementsByName('checkbox[]');
var len = cboxes.length;
var imageArray = new Array();

for (var i = 0; i < len; i++) {
    if (cboxes[i].checked) {
        imageArray[i] = cboxes[i].value;
    } 
}

If I have 50 boxes and click the checkbox number 2,4 and 6, loops through my array, I get the result.

for(var i = 0; i < imageArray.length; i++){
    gallery.innerHTML += imageArray[i] + "<br>";
}

--

undefined
Correct value
undefined
Correct value
undefined
Correct value

If I check number 1, 2, 3 I get the result

Correct value
Correct value
Correct value

Why do I get undefined when I skip a checkbox? How do I fix it

• javascript
• php
• arrays
• undefined

• instead of imageArray[i] , try imageArray.push – rab Commented Nov 6, 2013 at 9:17
• @rab is there anything wrong with the synatx: imageArray[i]? – Rajesh Paul Commented Nov 6, 2013 at 9:22
• @RajeshPaul The syntax is fine, it just doesn't do what they want. The value of i isn't necessarily the position in imageArray where they want to place the value when there are gaps between checked checkboxes. – Anthony Grist Commented Nov 6, 2013 at 9:25

5 Answers 5

This is because you are adding extra elements to an array. Take this code, for instance:

var a = []; // empty array
a[1] = 'foo'; // don't set a[0]

console.log(a.length); // gives 2

Javascript will always "fill in" gaps in the list of array keys. If you miss some out, Javascript will fill in the blanks with undefined.

Rather than adding the element to your array by the key name, just push it onto the end of the array:

imageArray.push(cboxes[i].value);

You get undefined because you're skipping indexes in imageArray. If the first checkbox isn't checked, it won't put anything in index 0, then because the second checkbox is checked, the first entry is placed into index 1.

When you iterate it doesn't skip those missed indexes if there is an index with a value after it, they just don't have a set value so it es back as undefined.

You could change this line:

imageArray[i] = cboxes[i].value;

to:

imageArray.push(cboxes[i].value);

That way it won't skip indexes when there are unchecked checkboxes.

It's because you're setting the value of imageArray[i] only when the corresponding checkbox is checked. If you check checkboxes 2, 4 and 6, you're essentially doing this:

imageArray[1] = cboxes[1].value;
imageArray[3] = cboxes[3].value;
imageArray[5] = cboxes[5].value;

imageArray[0], [2] and [4] are never being set, and thus are undefined.

To fix this, either make use of push() to push the values into the imageArray, or simply set dummy values for non-matching keys:

    for (var i = 0; i < len; i++) {
        if (cboxes[i].checked) {
            imageArray[i] = cboxes[i].value;
        } else {
            imageArray[i] = "";
        }
    }

The result:

imageArray[0] = "";
imageArray[1] = cboxes[1].value;
imageArray[2] = "";
imageArray[3] = cboxes[3].value;
imageArray[4] = "";
imageArray[5] = cboxes[5].value;

Alternatively using push():

    for (var i = 0; i < len; i++) {
        if (cboxes[i].checked) {
            imageArray.push(cboxes[i].value);
        }
    }

The result:

imageArray[0] = cboxes[1].value;
imageArray[1] = cboxes[3].value;
imageArray[2] = cboxes[5].value;

try this

var cboxes = document.getElementsByName('checkbox[]');
var imageArray =[];

for (var i = 0, len = cboxes.length ; i < len; i++) {
    if (cboxes[i].checked) {
        imageArray.push(cboxes[i].value );
    } 
}

You are setting the imageArray with respect to the variable i,

the loop is executing each time and hence it is setting undefined value for those elements in the array that are not set,

you should use a different loop variable, and increase its value only on successful condition.

Try modifying loop as below.

        var j=0;
        for (var i = 0; i < len; i++) {
            if (cboxes[i].checked == true) {
                imageArray[j] = cboxes[i].value;
                j++;
            }
        }