Как я могу использовать getElementById на динамически создаваемых входах?

Question

У меня возникли проблемы с получением состояния динамически создаваемых флажков.Я использовал приведенный ниже код для добавления нескольких флажков с динамическими идентификаторами в тело.

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 (...)» продолжает возвращать «ноль».

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">

Он интерпретирует весь идентификатор как строку, а не каквставляя числовое значение, чтобы оно выглядело так: 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/

Большое спасибоДжарред Парр!