javascript - 如何在动态创建的输入上使用 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>
    `;
}

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

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