Javascript how to change radio button label text?

后端未结

关注

 3  1778

I want to change the text of the label which is associated with the radiobutton id=\"male\". I have tried various ways to do it, but i can\'t make it work. I want to change

相关标签:

3条回答

南笙

2020-12-12 08:17

I tried to use ideas from the above to get a working example, and had some problems. So I asked for help in another posting and @KrishCdbry very kindly fixed the problem. The posted question is at javascript - How to dynamically change information displayed by radio button? Below is the working example with Krish's changes

 <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>

0 讨论(0)

不知归路

2020-12-12 08:26
You can use
```
var r = document.getElementsByTagName("label")   
```
to select all the label element in your page and then use
```
r[0].innerHTML ="new text" 
```
to select first label and set the text to "next text" in your test() function
0 讨论(0)
发布评论:

提交评论
- 加载中...

故里飘歌

2020-12-12 08:31

With jQuery, $('label[for=male]').html('New Label');

Plain JS:

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

Can also chain that together:

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

0 讨论(0)