修改我的单选输入按钮的文本？答案

【问题标题】：Modify the text of my radio input button?修改我的单选输入按钮的文本？
【发布时间】：2013-08-13 08:07:10
【问题描述】：

您的单选按钮一般都有名称和值，但旁边还有一些文字，在本例中为“更改此文字”。

如何在 javascript 中更改它？甚至警告它？ AFAIK，它不是 .inner html。

HTML：

            <input type="radio" name="radioOption1" value="Array 1"> Change this text

Javascript

    var confirmIExist = document.getElementsByName("radioOption1");
alert(confirmIExist.innerHTML);
    //alerts undefined

如果不是 .innerHTML，它是什么？如果我使用 getElementByName 或 getElementById 抓取输入对象，那么之后的哪个块代表警报文本？

【问题讨论】：

标签： javascript input innerhtml radio

【解决方案1】：

您可以使用alert(confirmIExist[0].nextSibling.textContent)，但最好将文本放在<label> 中的单选按钮旁边，然后获取它的内部html

<input type="radio" id="radioOption1" name="radioOption1" value="Array 1"><label for="radioOption1" id="r1option">Change this text</label>
...
var label = document.getElementById("r1option");
alert(label.innerHTML);

【讨论】：

【解决方案2】：

您不能为输入元素设置内部 html。而是用 a 包裹你的文本并给它一个 ID

<input type="radio" name="radioOption1" value="Array 1"> <label id="radioText">Change this text</label>

【讨论】：

既然有<label>，为什么还要使用<span>？

【解决方案3】：

input 是一个自闭合元素。不能有innerHTML

nextSibling 将返回单选按钮后面的节点。

document.getElementsByName('radioOption1')[0].nextSibling.nodeValue = 'Text changed';

jsFiddle Demo

【讨论】：

【解决方案4】：

confirmIExist[0].nextSibling.textContent="abc"

【讨论】：