Javascript如何更改单选按钮标签文本？答案

【问题标题】：Javascript how to change radio button label text?Javascript如何更改单选按钮标签文本？
【发布时间】：2015-11-24 09:48:34
【问题描述】：

我想更改与单选按钮 id="male" 关联的标签文本。我尝试了各种方法来做到这一点，但我无法让它发挥作用。我想更改与单选按钮关联的标签中的文本“男性”。

  <input type="radio" name="sex" id="male" value="male">
        <label for="male">Male</label>
  </input>

 <input type="button" value="Submit" onclick = test()>

<script>

function test()
{
   var r = document.getElementById("male");
   r.nextSibling.data = "adaS";
//  r.nextSibling.nodeValue = "adaS";     // have tried all these ways
//  r.childNodes[0].value= "adaS";
//  r.childNodes[0].innerHTML= "adaS";
//   r.parentNode.childNodes[1].innerHTML= "adaS";

}

</script>

请提出一些可行的方法来更改标签中的文本“男性”。

【问题讨论】：

标签： javascript html radio-button label

【解决方案1】：

你可以使用

var r = document.getElementsByTagName("label")

选择页面中的所有标签元素，然后使用

r[0].innerHTML ="new text"

在 test() 函数中选择第一个标签并将文本设置为“下一个文本”

【讨论】：

我不想使用 geElementByTagName。我想使用“for”的概念。我已将标签与单选按钮相关联。我该怎么做呢
你可以使用@jwkicklighter的方法如果你坚持使用“for”来选择一个特定的标签，或者你可以在标签中添加一个id属性以便在纯JavaScript或Jquery中进行最简单的选择。跨度>
感谢@AndyHu。是的，我可以使用 ID 和“for”访问标签，但如果页面上有很多标签，则需要很长时间。因为它将遍历它们中的每一个。由于标签是标签的子标签，如果有的话，我不能使用父子方法访问它吗
标签现在正在自动关闭，因此标签不起作用。您可以使用 document.getElementById("male").nextSibling.nextSibling.innerHTML 来选择标签文本，以访问并更改标签的文本。第一个“nextSibling”选择输入的文本值，下一个“nextSibling”选择标签。

【解决方案2】：

使用 jQuery，$('label[for=male]').html('New Label');

纯 JS：

var input = document.getElementById('male');
var label = input.getElementsByTagName('label')[0];
label.innerHTML = 'New Text';

也可以将它们链接在一起：

var label = document.getElementById('male').getElementsByTagName('label')[0];
label.innerHTML = 'New Text;

【讨论】：

如何使用 JAVASCRIPT
@AnkitRajput jQuery 只是一个 JS 库，您没有指定不能使用它。只是想帮忙，不需要帽子。
哥们，我需要帮助。我不是在嘲弄你或对你无礼对不起，如果你有那样的感觉。这个问题在任何地方都可以使用 Jquery 来解决。我不知道为什么。使用它显然很容易。但我想使用 JS 对其进行排序
我目前无法测试，但可以尝试 .htmlFor 和 @AndyHu 的 getElementsByTagName 以及该数组上的 for 循环。
感谢@jwkicklighter。是的，我可以使用 ID 和“for”访问标签，但如果页面上有很多标签，则需要很长时间。因为它将循环遍历它们中的每一个。由于标签是标签的子标签，如果有的话，我不能使用父子方法访问它。我的意思是那个语法是什么

【解决方案3】：

我尝试使用上面的想法来获得一个可行的示例，但遇到了一些问题。所以我在另一个帖子中寻求帮助，@KrishCdbry 非常友好地解决了这个问题。发布的问题位于 javascript - How to dynamically change information displayed by radio button? 以下是 Krish 更改的工作示例

 <html>
<form name="myform" onsubmit="OnSubmitForm();">
   <input type="radio" id = 'first'  name="operation" value="1"
          checked> <label for="alsoFirst"> Answer 1 </label>
   <input type="radio" id = 'second'  name="operation" value="2">
  <label for="alsoSecond">Answer 2</label>

   <p>
   <input type="submit" name="submit" value="save">
   </p>
</form>



<script type="text/javascript">
 document.addEventListener('readystatechange', function() {
  // Seems like a GOOD PRACTICE - keeps me from getting type error I was getting

    // https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object

    if (document.readyState === "complete") {
      init();
    }
  });

 function init() {

    console.log ("expect to change -Answer 1- displayed by first button to word junk");


     // this works
    var label = document.getElementsByTagName('label') [0];
    // this does not work
    label.innerHTML = 'junk';
    }

//http://www.javascript-coder.com/html-form/html-form-action.phtml
function OnSubmitForm()
{
  if(document.getElementById('first').checked == true)
    {
    alert ( "You have selected the first answer" );  
    }
  else
    if(document.getElementById('second').checked == true)
        {
        alert ( "You have selected the SECOND answer" );  
        }

  return false;
}

/*
<input type="radio" name="sex" id="male" value="male">
        <label for="male">Male</label>
  </input>

var input = document.getElementById('male');
var label = input.getElementsByTagName('label')[0];
label.innerHTML = 'New Text';

*/
//https://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
</script>




</html>

【讨论】：