如何在动态创建的输入上使用 getElementById？

Question

我在获取动态创建的复选框的状态时遇到了一些问题。我使用下面的代码向主体添加了几个带有动态 ID 的复选框。

var html = ...;
for(var i = 0; i < options.checkTextArray.length; i++)
{
    html +=
    `
        <label class="checkbox" [attr.for]="'myCheckboxId' + i">
            <input class="checkbox__input" type="checkbox" [name]="'myCheckboxName' + i" [id]="'myCheckboxId' + i">
            <div class="checkbox__box"></div>${options.checkTextArray[i]}: 
        </label>
        <br>
    `;
}

在代码的另一部分，我想 and/or 设置复选框的状态，但到目前为止还没有成功。我尝试使用下面的代码来实现我的目标，但 "document.getElementById(...)" 一直返回 "null".

var ckbStateBuffer = new Array();
var txtContenBuffer = new Array();

for(var i = 0; i < options.checkTextArray.length; i++) {
    ckbStateBuffer.push(document.getElementById("'myCheckboxId' + i").checked);
}

如您所见，我想将复选框状态保存在数组中并使用它来将新状态重置为旧状态（例如，按下按钮时）。

那么我应该如何将状态添加到这个缓冲区数组？我在上面的代码中做错了什么？尝试了其他几种方法，但 none 有效。

Answer 1

您的代码中似乎只有一个简单的错误。您正在尝试做的事情会影响：

id=myCheckboxName1
id=myCheckboxName2
id=myCheckboxName3
...

但是，您的代码不正确：

<input class="checkbox__input" type="checkbox" [name]="'myCheckboxName' + i" [id]="'myCheckboxId' + i">

它将整个 id 解释为一个字符串，而不是插入数值，所以它看起来像这样：myCheckboxIdi

或许可以尝试以下方法：

var html = ...;
for(var i = 0; i < options.checkTextArray.length; i++)
{
    var checkboxId = `myCheckboxId${i}`;
    html +=
    `
        <label class="checkbox" [attr.for]=${checkboxId}>
            <input class="checkbox__input" type="checkbox" [name]=${checkboxId} [id]=${checkboxId}>
            <div class="checkbox__box"></div>${options.checkTextArray[i]}: 
        </label>
        <br>
    `;
}

注意值现在是如何通过模板字符串插入到字符串中的吗？这应该可以，但我没有运行所以它可能需要一些修改。您的新访问代码类似于：

var ckbStateBuffer = new Array();
var txtContenBuffer = new Array();

for(var i = 0; i < options.checkTextArray.length; i++) {
    ckbStateBuffer.push(document.getElementById(`myCheckboxId${i}`).checked);
}

受此影响的东西应该修复您的代码。如果您需要更多说明，请告诉我。

Answer 2

好的，所以我找到了解决方案。显然你不能使用 getElementById(checkboxId) 来获取复选框状态。您必须使用 getElementsByTagName("input") 创建一个数组，然后在检查复选框类型的输入时遍历此数组。

var inputsArray = document.getElementsByTagName("input");
var ckbStateBuffer = new Array();

for (var i = 0; i < 3; i++)
{

    if(inputsArray[i].type == "checkbox")
    {

        ckbStateBuffer.push(inputsArray[i].checked);

    }

}

JSFiddle 在这里：https://jsfiddle.net/Maximo40000/agL9opq6/

非常感谢 Jarred Parr！

如何在动态创建的输入上使用 getElementById？

How do I use getElementById on dynamically created inputs?

html

javascript

input

dynamic

getelementbyid