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

Question

我在获取动态创建的复选框的 state 时遇到了一些麻烦。 我使用下面的代码向正文添加了几个带有动态 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>
    `;
}

在代码的另一部分，我想获取和/或设置复选框的 state 但到目前为止还没有成功。 我尝试使用下面的代码来实现我的目标，但“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);
}

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

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

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/

非常感谢贾里德·帕尔！