2

我在 php 中有一个 for 循环，它在我的页面上添加了一些看起来像这样的复选框

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

我想使用 javascript 检查哪些被检查并在数组中添加值

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

如果我有 50 个框并单击复选框编号 2,4 和 6，循环遍历我的数组，我会得到结果。

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

--

undefined
Correct value
undefined
Correct value
undefined
Correct value

如果我检查数字 1、2、3，我会得到结果 

Correct value
Correct value
Correct value

当我跳过一个复选框时，为什么我会得到未定义？我如何解决它

4

5 回答 5

6

这是因为您正在向数组添加额外的元素。以这段代码为例：

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

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

Javascript 将始终“填补”数组键列表中的空白。如果您遗漏了一些内容，Javascript 将使用undefined.

与其通过键名将元素添加到数组中，不如将其添加到数组push的末尾：

imageArray.push(cboxes[i].value);
于 2013-11-06T09:18:52.973 回答
0

您正在相对于变量 i 设置 imageArray，

循环每次都在执行，因此它为数组中未设置的那些元素设置未定义的值，

您应该使用不同的循环变量，并仅在成功条件下增加其值。

尝试如下修改循环。

        var j=0;
        for (var i = 0; i < len; i++) {
            if (cboxes[i].checked == true) {
                imageArray[j] = cboxes[i].value;
                j++;
            }
        }
于 2013-11-06T09:31:43.497 回答
0

这是因为您imageArray[i] 仅在选中相应复选框时才设置值。如果您选中复选框 2、4 和 6，您实际上是在执行以下操作：

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

imageArray[0]，[2]并且[4]永远不会被设置，因此是undefined。

要解决此问题，要么使用push()将值推送到 中imageArray，要么简单地为不匹配的键设置虚拟值：

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

结果：

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

或者使用push()：

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

结果：

imageArray[0] = cboxes[1].value;
imageArray[1] = cboxes[3].value;
imageArray[2] = cboxes[5].value;
于 2013-11-06T09:19:35.837 回答
0

尝试这个

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 );
    } 
}
于 2013-11-06T09:20:04.370 回答
0

你得到 undefined 是因为你跳过了imageArray. 如果第一个复选框没有被选中，它不会在索引 0 中放置任何内容，然后因为第二个复选框被选中，所以第一个条目被放置在索引 1 中。

当您迭代时，如果后面有一个带有值的索引，它不会跳过那些丢失的索引，它们只是没有设定值，所以它返回为undefined.

你可以改变这一行：

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

至：

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

这样，当有未选中的复选框时，它不会跳过索引。

于 2013-11-06T09:18:40.740 回答