Javascript

Question

我想问一下如何 - 通过 Javascript - 到 更改单选按钮的标签 innerText（见下面的代码）同时不清除里面的输入标签。 Label innerText 这里的意思是“Button-Label-X”.

我尝试通过 document.getElementsByClassName("radio-label") 的元素诊断标签样式，包括

文本内容："Button-Label-X"
内文："Button-Label-X"
外部文本："Button-Label-X"

然后为它们分配新的字符串值（例如 "Button-Label-Y"）。然而，所有这些方式都会导致相同的结果：输入消失，只剩下新的值。有人在这里有什么想法吗？

<div class="radio">
  <label class="radio-label"><input type="radio" name="optradio"> Button-Label-X </label>
</div>

当然，我也可以把input tag放在label外面，一切都解决了。但是，对于那种情况，我必须为输入设置 id，为标签设置 "for:id"。对于 05 个按钮而不是 01 个按钮的情况，它变得繁琐。

Answer 1

如果我没理解错的话，您可以从 childNodes. Once you have it, you can change the text by set the property textContent 访问文本部分到想要的文本。

像这样：

function changeLabelText(label, text) {
  var children = label.childNodes;
  [].forEach.call(children, function(child) {
    if (child.nodeType == 3) {
      child.textContent = text;
    }
  });
}

var label = document.querySelector('label');
changeLabelText(label, 'blabla');

<div class="radio">
  <label class="radio-label"><input type="radio" name="optradio"> Button-Label-X </label>
</div>

Javascript - 如何在不清除输入的情况下更改标签的 innerText

Javascript - how to change innerText of label while not wiping out the input

html

input

label

innertext