Javascript 从HTML列表中获取复选框选择

我试图遍历包含复选框的HTML列表，以获得与每个复选框关联的

id

。但是，我编写的Javascript上的

forEach（）

函数给出了以下错误：

uncaughttypeerror:faculty\u deck\u list.forEach不是一个函数

。我尝试按如下方式遍历ID：

var decks = []; //Store the decks

var faculty_deck_list = document.getElementById('faculty_list').getElementsByTagName('input');

var student_deck_list = document.getElementById('student_list').getElementsByTagName('input');

faculty_deck_list.each(function () {
    decks.push($(this).id);
});

student_deck_list.each(function () {
    decks.push($(this).id);
});

function populateLists(json) {
for (var i = 0; i < json.length; i++){
    //Create a new list element
    var list_item = document.createElement('li'); 
    list_item.appendChild(document.createTextNode(Object.values(json)[i].name));

    //Create the checkbox to add to the list element
    var select_checkbox = document.createElement('input');
    select_checkbox.type = 'checkbox';
    select_checkbox.id = json[i].deck_ID;

    //Add the checkbox to the list element
    list_item.appendChild(select_checkbox);

    var list_name = (json[i].faculty=='1')?'faculty':'student' + '_list';

    list = document.getElementById(list_name);

    list.append(list_item);
}
}

我正在生成包含以下元素的列表：

var decks = []; //Store the decks

var faculty_deck_list = document.getElementById('faculty_list').getElementsByTagName('input');

var student_deck_list = document.getElementById('student_list').getElementsByTagName('input');

faculty_deck_list.each(function () {
    decks.push($(this).id);
});

student_deck_list.each(function () {
    decks.push($(this).id);
});

function populateLists(json) {
for (var i = 0; i < json.length; i++){
    //Create a new list element
    var list_item = document.createElement('li'); 
    list_item.appendChild(document.createTextNode(Object.values(json)[i].name));

    //Create the checkbox to add to the list element
    var select_checkbox = document.createElement('input');
    select_checkbox.type = 'checkbox';
    select_checkbox.id = json[i].deck_ID;

    //Add the checkbox to the list element
    list_item.appendChild(select_checkbox);

    var list_name = (json[i].faculty=='1')?'faculty':'student' + '_list';

    list = document.getElementById(list_name);

    list.append(list_item);
}
}

---

问题是

document.getElementsByTagName

返回节点列表，而节点列表不支持

each（）

方法

由于您正在使用JQuery，请更改代码，以便将节点列表转换为JQuery对象，该对象支持

each（）

：

---

如果不想使用jQuery，还可以将节点列表转换为数组：

var faculty_deck_list = Array.from(document.getElementById('faculty_list').getElementsByTagName('input'))

---

@你的评论是错误的。通过将DOM查询链接到早期查询的结果，可以限制查询的深度并获得可能更快的结果。“这样做很好。”斯科特·马库斯，我看到了并删除了我的评论。谢谢。或者只是

$（“#教员列表输入”）。每个（…

）都可以删除节点列表。@James您不会删除节点列表（JQuery只是在后台用标准DOM查询创建它们）.JQuery并不神奇。当我尝试这段代码时，在选中两个复选框后，循环永远不会停止runs@lillemap我看不到您的代码中有任何内容在您选中复选框时会导致任何事情发生。我也看不到任何复选框。您有单选按钮。您的事件处理程序连接在哪里？您的代码只需获得两个组并按下独立于单击任何内容，将元素放入新数组。@lillemap将

id

s推入

decks

数组时，不要将

this

包装在JQuery对象中。JQuery对象没有

id

属性，因此您得到的是

未定义的
。行应该是：
decks.push（this.id）；
以便获得此时迭代的元素的
id
。
Array.from（）
是ES2015的一部分，在IE中不受支持。最好使用：
Array.prototype.slice.call（…）
var faculty_deck_list = Array.from(document.getElementById('faculty_list').getElementsByTagName('input'))