Changing the label of a radiobutton

Asked

Viewed 236 times

0

I have this radio button and would like to change the text of radio button "All" for yes, depending on the condition:

  <label id="radiotodos" class="radio-inline control-label">
        <input type="radio" name="optradio" value="3">Todos
  </label>

But when I do so:

  $("#radiotodos").html("Sim");

It doesn’t work, it changes to yes, but the radiobutton, I’ve tried changing the id, but it doesn’t work.

javascript html
  • 1

    what do you want to do exactly? by clicking on this radio button change all other radios Buttons to YES?

  • Have you tried $("#radiotodos").text("Sim")

  • You’re getting the value of label, this way will not work. You must take the value of input and trade, something like $("#firstopt").prop("checked", "true"). Doing so, the option will be checked.

  • @Azzi tried, but the radiobutton vanish and there’s just yes.

  • @Ricardo I already have the condition, I need that when he enters the condition, he change the text to Yes.

  • @Jaksonfischer I don’t mark it, I want to change the label, the text.

  • Ahh, right, got it now... Well this way it will work as @Ricardo’s example below

Show 2 more comments

2 answers

4


Try This

$("#radiotodos").html('<input type="radio" name="optradio" value="3">Sim');

  • That’s just what I needed, hoping just to give the time, to accept your reply. Thank you.

  • Thank you, happy to help

0

Since the text "All" is the last node within the label, you can change only it by taking the amount of -1 nodes. For example, if the label has 3 nodes, you should take node 2 (as in an array, where indexes start from 0):

var nos = document.getElementById("radiotodos").childNodes; // pega os nós
nos[nos.length-1].nodeValue = "Sim"; // altera o último nó
<label id="radiotodos" class="radio-inline control-label">
   <input type="radio" name="optradio" value="3">Todos
</label>

If you are using jQuery, you can do it this way too:

$("#radiotodos").contents().filter(function(){
   return this.textContent.trim() == "Todos";
}).each(function(){
   this.nodeValue = "Sim";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="radiotodos" class="radio-inline control-label">
   <input type="radio" name="optradio" value="3">Todos
</label>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.