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);
}

这种影响应该可以修复您的代码。让我知道是否需要进一步说明。

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？

2 个答案: