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属性应用于每个标签并为其分配输入ID的方法它。有可能吗？

Answer 1

基本上，您必须使用 document.getElementsByTagName（“ input”）来获取页面上所有输入html元素的集合。然后循环遍历此列表，以查看其中哪些实际上是复选框。如果找到了复选框，则可以使用 element.nextElementSibling 获取下一个html元素。最后，只需将其 htmlFor 属性设置为输入元素的ID。

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

Javascript-使用JavaScript将标签与输入相关联

2 个答案: