Menu
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.
461
To change the button text, first we need to access the button element inside the JavaScript by using the document. getElementById() method and add a click event handler to the button, then set it's value property to blue . Now, when we click on our button , it changes the value from Red to Blue or vice versa.
To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag.
Each check box must have a unique name. Radio buttons allow only one choice within a group of buttons. Each radio button within a group should have the same name. You can create more than one group of radio buttons by using different names.
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');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
