Why are some values in my array undefined

问题

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

回答1:

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

回答2:

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 comes 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.

回答3:

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;

回答4:

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

回答5:

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

来源：https://stackoverflow.com/questions/19807953/why-are-some-values-in-my-array-undefined

标签

javascript

php

arrays

undefined