CODEWITHSUNDEEP
javascriptjqueryhtml
Simon
Simon

Reputation: 77

Change label text on radio button selection with jQuery

I need to change the label text on a radio button when it is selected from "Set default" to "default" - How can this be done with jQuery? I presume that you would use the class radio-defaultas the selector but I don't know much about jQuery.

<div class="radio-default">
  <input type="radio" id="line-radio-1" name="line-radio">
  <label for="line-radio-1">Set default</label>           
</div>

<div class="radio-default">
  <input type="radio" id="line-radio-2" name="line-radio">
  <label for="line-radio-2">Set default</label>           
</div>

<div class="radio-default">
  <input type="radio" id="line-radio-3" name="line-radio">
  <label for="line-radio-3">Set default</label>           
</div>

Upvotes: 2

Views: 13591

Answers (6)

Newinjava
Newinjava

Reputation: 960

Try this

$('input:radio').click(function() {
   $('label').text('Set default');
   $(this).next('label').html('Default');
  });

http://jsfiddle.net/ph2gvjcc/

Upvotes: 0

Abhishek Jain
Abhishek Jain

Reputation: 2977

Do this:- 

 var $radioButtons = $('.radio-default input:radio[name="line-radio"]');
 $radioButtons.change(function(){
    if($(this).val() == 'on'){
       $radioButtons.siblings('label').text('Set default');
       $(this).siblings('label').text('default')
    }
});

Working JsFiddle here

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15403

Try

$("input[name='line-radio']").click(function() {
      $('.radio-default label').text('Set default');
      if(this.checked){
       $(this).next().text('default');
      }
 });

Fiddle

Upvotes: 4

Vivek Gupta
Vivek Gupta

Reputation: 1055

Use below script

 $( "input:radio" ).click(function() {
    $(':radio').each(function() {
        $("#"+this.id).next().text( "Set default" );
    });

    $("#"+this.id).next().text( "Default" );

});

Upvotes: 2

Monicka
Monicka

Reputation: 505

you may want to reset the text on the previoused button clicked, but this can help you:

$('.radio-default').on('click',function(){
    $(this).find('label').text("set");
})

Upvotes: 0

Wesley Skeen
Wesley Skeen

Reputation: 1214

You can add an on click hadler on the radio button

<input type="radio" id="line-radio-1" name="line-radio" onClick="yourFunc">

yourFunc: function(e){
    $(e).next('label').text('your text');
}

Upvotes: 0

Related Questions