Javascript - ассоциирование метки с вводом с использованием JavaScript

Question

У меня есть веб-страница с большим количеством входов. Все они в этом формате, с тегом ввода перед меткой.

<input type='checkbox' id='myinput'> <label for='myinput'>My Text</label>

Используя javascript, если бы я не хотел каждый раз набирать type='checkbox', я мог бы сделать это, и каждый вход стал бы флажком ...

for (i=0;i<document.getElementsByTagName('input').length;i++) {
document.getElementsByTagName('input')[i].setAttribute('type', 'checkbox')}

Я бы хотел сделать то же самое с элементом label. Я не хочу использовать for='myinputsID' для каждого ярлыка. Я понимаю, что могу вкладывать входные данные в метку таким образом, чтобы исключить for,

<label>My Text <input type="checkbox" id="myinput"> </label>

но давайте просто скажем, что я не хочу этого делать. Мне нужно сохранить html в том же формате, что и для ввода, а затем для метки ... Мне нужно найти способ применить атрибут htmlFor к каждой метке и назначить ему идентификатор ввода, непосредственно предшествующий ему. Это возможно?

Answer 1

В основном вы должны использовать document.getElementsByTagName ("input") , чтобы получить коллекцию всех входных HTML-элементов на вашей странице. Затем выполните цикл по этому списку, чтобы увидеть, какие из них на самом деле являются флажками. Если мы нашли флажок, мы можем получить следующий HTML-элемент, используя element.nextElementSibling . Наконец, просто установите атрибут htmlFor для идентификатора элемента ввода.

var elements = document.getElementsByTagName("input");
for (var a = 0; a < elements.length; a++) {
  if (elements[a].type == "checkbox") {
    elements[a].nextElementSibling.htmlFor = elements[a].id;
  }
}

<input type='checkbox' id='myinput1'>
<label>My Text</label>
<input type='checkbox' id='myinput2'>
<label>My Text</label>
<input type='checkbox' id='myinput3'>
<label>My Text</label>

Answer 2

Я думаю, что это должно работать

var inputs = document.getElementsByTagName('input');
var input;
for (i=0;i<inputs.length;i++) {
  input = inputs[i];
  input.setAttribute('type', 'checkbox');
  input.nextElementSibling.setAttribute('for', input.id);
}