У меня есть цикл for в php, который добавляет несколько флажков на моей странице, которые выглядят так
<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
Почему я не могу определить, когда я пропускаю флажок? Как это исправить?
Это связано с тем, что вы добавляете дополнительные элементы в массив. Возьмите этот код, например:
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);
Вы получаете undefined, потому что вы пропускаете индексы в imageArray . Если первый флажок не установлен, он не будет помещать что-либо в индекс 0, а потому, когда установлен второй флажок, первая запись помещается в индекс 1.
Когда вы повторяете, он не пропускает пропущенные индексы, если после него есть индекс со значением, они просто не имеют заданного значения, поэтому оно возвращается как undefined .
Вы можете изменить эту строку:
imageArray[i] = cboxes[i].value;
чтобы:
imageArray.push(cboxes[i].value);
Таким образом, он не будет пропускать индексы, когда отмечены флажки без отметки.
Это связано с тем, что вы устанавливаете значение 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;
попробуй это
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 ); } }
Вы устанавливаете imageArray относительно переменной i,
цикл выполняется каждый раз и, следовательно, он устанавливает неопределенное значение для тех элементов в массиве, которые не установлены,
вы должны использовать другую переменную цикла и увеличить ее значение только в успешном состоянии.
Попробуйте изменить цикл, как показано ниже.
var j=0; for (var i = 0; i < len; i++) { if (cboxes[i].checked == true) { imageArray[j] = cboxes[i].value; j++; } }