jquery - Change the text next to a radio button using javascript? - Stack Overflow

admin管理员组

文章数量:1324431

I am very new to javascript and I can't set the text next to the Radio button to what I want, even after trying to find everything I can online. I am sure it something simple and I would really apprecitae it if someone could help me.

Here is my HTML Element for my radio group

<form class="description" action ="">
  <input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
  <input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
  <input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
  <input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>

And this is the Javascript I am trying to run to test just changing one

document.getElementById('answer0id').value = 'testing123';

I know it is probably an easy fix, but I would really appreciate anyone who could help me.

I am very new to javascript and I can't set the text next to the Radio button to what I want, even after trying to find everything I can online. I am sure it something simple and I would really apprecitae it if someone could help me.

Here is my HTML Element for my radio group

<form class="description" action ="">
  <input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
  <input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
  <input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
  <input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>

And this is the Javascript I am trying to run to test just changing one

document.getElementById('answer0id').value = 'testing123';

I know it is probably an easy fix, but I would really appreciate anyone who could help me.

• javascript
• jquery
• html

Share Follow edited Jul 22, 2017 at 22:40 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Jul 22, 2017 at 22:36 Jake VossenJake Vossen 4711 silver badge44 bronze badges 3

• So what happens? Nothing? Are you sure the javascript even executes? Where are you putting it? – Ann L. Commented Jul 22, 2017 at 22:39
• Actually, the text - if by that you mean the string right before the <br> -- isn't the value of the input tag. It's a separate text node. – Ann L. Commented Jul 22, 2017 at 22:43
• @adeneo Yeah, just realized that. Will delete my suggestion. – Ann L. Commented Jul 22, 2017 at 22:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

The text is just a rogue text node, as the input is self-closing and can't contain any inner text, but you can target the text node ing after the input with something like nextSibling

document.getElementById('answer0id').nextSibling.textContent = ' testing123';

<form class="description" action ="">
  <input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
  <input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
  <input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
  <input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>

You could also modify the HTML to wrap the text in either a span, label or some other element that is more easily selectable.

document.querySelector('#answer0id ~ label').innerHTML = 'testing123';

<form class="description" action ="">
  <input type="radio" id="answer0id" name="answers" value="answer0" />
  <label for="answer0id">answer0</label>
  <br />
  <input type="radio" id="answer1id" name="answers" value="answer1" />
  <label for="answer1id">answer1</label>
  <br />
  <input type="radio" id="answer2id" name="answers" value="answer2" />
  <label for="answer2id">answer2</label>
  <br />
  <input type="radio" id="answer3id" name="answers" value="answer3" />
  <label for="answer3id">answer3</label>
</form>

I believe that label is what you are looking for.

Note: Input doesn't have innerHTML/textContent attributes since it's a non-closing tag. That's why the inventor of HTML came up with labels. What's more - you are even able to check the radio button by clicking the corresponding text.

let elem = document.querySelector('label[for="answer0id"]');

elem.textContent = 'testing123';

<form class="description" action="">
  <input type="radio" id="answer0id" name="answers" value="answer0">
  <label for='answer0id'>answer0</label><br />
  <input type="radio" id="answer1id" name="answers" value="answer1">
  <label for='answer1id'>answer1</label><br />
  <input type="radio" id="answer2id" name="answers" value="answer2">
  <label for='answer2id'>answer2</label><br />
  <input type="radio" id="answer3id" name="answers" value="answer3">
  <label for='answer3id'>answer3</label>
</form>

document.getElementById('answer0id').value= 'testing123'; refers to <input type="radio" id="answer0id" name="answers"value="answer0"> answer0<br>. Therefore, it does not change the text.

In your case, you can select the text via .nextSibling.textContent (see below). An alternative would be wrapping the text in an extra element, say <span id="answer0-label">answer0</span> and select that one directly.

document.getElementById('answer0id').nextSibling.textContent = ' testing123';

<form class="description" action ="">
  <input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
  <input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
  <input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
  <input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>

本文标签： jqueryChange the text next to a radio button using javascriptStack Overflow