Как задать for для label JS?

Question

Как задать for="" для <label> следующего формата. Чтобы каждый из for="" по мере своей вложенности увеличивался подобным образом:

<label for="link01">
    <input type="checkbox">
</label>

<label for="link02">
    <input type="checkbox">
</label>

<label for="link03">
    <input type="checkbox">
</label>

У меня есть отрывок такого кода, но не приложу ума как указать for="": document.querySelectorAll('.jkef').forEach((item, index) => item.id = "link0" + (index + 1));

Answer 1

const counter = 5;
for (let i = 0; i < counter; i++) {
    
    label = document.createElement('label'),
    checkbox = document.createElement('input');
    
    label.textContent = `link${i + 1}`;
    label.setAttribute('for', `link${i + 1}`);
    
    checkbox.type = 'checkbox';
    checkbox.setAttribute('id', `link${i + 1}`);
    checkbox.setAttribute('name', `link${i + 1}`);
    
    document.getElementById("app").appendChild(checkbox);
    document.getElementById("app").appendChild(label);
    
}

<div id="app"></div>

Answer 2

Если динамически создавать label, то вот так:

const labels = 5;

for (let i = 0; i < labels; i++) {
    const label = document.createElement('label'),
        checkbox = document.createElement('input');

    checkbox.type = 'checkbox';

    label.setAttribute('for', `link${i + 1}`);

    label.appendChild(checkbox);

    console.log(label);
}

С помощью метода .setAttridute.

БЛОГ НА HUSL

Как задать for для label JS?

Ответы (2 шт):