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

Javascript how to change radio button label text?

本文关键字：标签 文本 单选按钮 何更改 Javascript      更新时间：2023-09-26

我想更改与单选按钮id="male"相关联的标签文本。我试过各种方法，但就是行不通。我想更改与单选按钮关联的标签中的文本"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>

请建议一些工作方法来改变标签中的文本"Male"

可以使用

var r = document.getElementsByTagName("label")

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

r[0].innerHTML ="new text"

在test()函数中选择第一个标签并将文本设置为"next text"

我尝试使用上面的想法来获得一个工作示例，并且遇到了一些问题。所以我在另一个帖子中寻求帮助，@ krisshcbry非常友好地解决了这个问题。张贴的问题是在javascript -如何动态地改变单选按钮显示的信息?下面是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>

使用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;
相关文章：