javascript - 为什么无法在数组中获取输入值复选框？

Question

在下面描述的代码中，输入的值应该从数组中的每个人那里获取，并且应该创建一个带有 innerHtml 中输入值的新 div。我不知道为什么会出现未定义长度值的错误？

<input type="checkbox" class="checkboxnewdivs" id="checkboxnewdivs" name="checkboxnewdivs" value="divsone">
<input type="checkbox" class="checkboxnewdivs" id="checkboxnewdivs" name="checkboxnewdivs" value="divstwo">
<input type="checkbox" class="checkboxnewdivs" id="checkboxnewdivs" name="checkboxnewdivs" value="divsthree">

<button onclick="myFunction()">Click me</button>

<div id="container"></div>

function myFunction() {
let array = [];
var checkboxnewdivs = document.querySelectorAll('input[name="checkboxnewdivs"]:checked');

         for (var i = 0; i < checkboxnewdivs.length; i++) {
                     
         var iddivs = array.push(checkboxnewdivs[i].value);  
         
         var div_new = document.createElement("DIV"); 
         div_new.innerHTML = "ID div:"+iddivs ;                   
         document.getElementById("container").appendChild(div_new);
        
         }        
}

标签： javascriptarraysinputcheckboxreturn-value

Answer 1

var checkboxnewdivs = document.querySelectorAll('input[name="checkboxnewdivs"]:checked').value;

应该

var checkboxnewdivs = document.querySelectorAll('input[name="checkboxnewdivs"]:checked');

第一个是尝试value从节点集合中获取属性，这显然是未定义的。

你也有一些错别字（双's'）并且没有array在任何地方定义。定义你定义的地方checkboxnewdivs。

工作演示：https ://jsfiddle.net/mitya33/m9L2dvz5/1/