changing text of radio button

Question

I have a list of radio buttons like this:

<div id="TheOptions">
  <input type="radio" id="test1" name="mylist"/>option 1
  <input type="radio" id="test2" name="mylist"/>option 2
  <input type="radio" id="test3" name="mylist"/>option 3
  <input type="radio" id="test4" name="mylist"/>option 4
</div>

When I write

  $('#test1').html('best option');

The text is added to the radio button and the current text "option 1" still shows.

How can I change this to make it work?

Thanks.

Answer 1

You should wrap your text in <label> elements:

<div id="TheOptions">
  <input type="radio" id="test1" name="mylist"/><label for="test1">option 1</label>
  <input type="radio" id="test2" name="mylist"/><label for="test1">option 2</label>
  <input type="radio" id="test3" name="mylist"/><label for="test1">option 3</label>
  <input type="radio" id="test4" name="mylist"/><label for="test1">option 4</label>
</div>

Now your text is explicitly associated with the corresponding radio button and users will even be able to click on the text, visually impaired users will also be quite thankful for the improved usability. Then you can just do:

$('label[for=test1]').html('best option');