使用JavaScript更改HTML的“for”标签

Question

我需要使用JavaScript更改扩展程序中的“for”标签。我不确定如何做到这一点。感谢您的帮助！

<input id="theCheckboxId" type="checkbox" name="theCheckBoxName" />
<label for="theCheckBox">The text I want to change</label>

- Alex Mousavi

Answer 1

演示

首先给标签设置一个id。

<label id="lbl1" for="theCheckBox">The text I want to change</label>

然后执行

document.getElementById("lbl1").setAttribute("for", "theCheckboxId");

编辑

等一下，你是想要改变`for`的值还是标签的实际文本？无论如何，以下是您可以更改文本的方法：

if (label.textContent)
    label.textContent = "New Text";
else if (label.innerText)
    label.innerText = "New Text"
else
    label.innerHTML = "New Text";

- Adam Rackis

---

另一种改变“for”值的方式是：document.getElementById("lbl1").htmlFor = "theCheckboxId"; - xd6_

Answer 2

虽然您没有提问，但如果您正在使用jQuery，则可以通过以下方式更简单地完成：

$('label[for="theCheckBox"]').text('your new text')

话虽如此，将其替换为ID确实是最高效的选项，不过我们不知道您是否有权限直接访问HTML（如果可以，您可能可以在那里直接更改文本）。

- DA.

Answer 3

要更改文本，请按照以下步骤操作：

document.getElementById('theCheckboxId').nextElementSibling.textContent = 'newValue';

或者这个：

document.querySelector('#theCheckboxId + label').textContent = 'newValue';

如果您需要支持旧版浏览器，可以采取以下方法：

function nextElement( el ) {
    while( (el = el.nextSibling) && el.nodeType !== 1 );
    return el;
}

nextElement( document.getElementById('theCheckboxId') ).innerHTML = 'newValue';

http://jsfiddle.net/3kEYw/

- user1106925

---

@AdamRackis：快速查看示例中的当前文本。 ;) 我必须承认，标题有些误导。 - user1106925

是的，那正是让我相信他可能想要更改文本的文字...... - Adam Rackis

标题和我需要更改一个“for”标签 :) - Adam Rackis

我在你发帖的时候正在更新 - 不想让你觉得我抄袭了你的答案 ;) - Adam Rackis

@AdamRackis：不，我知道你没有。:)是的，我从来没有听说过有人称之为“for标签”。 - user1106925