CODEWITHSUNDEEP
jquery
Shaggy
Shaggy

Reputation: 5820

change text of radio button using jquery

I would like to change text associated with radio button dynamically.

Html :

<label for="rdBtnNormalPricing">
    <div class="radio" id="uniform-rdBtnDigitize">
        <span><input id="rdBtnDigitize" runat="server" name="groupradio" type="radio" value="1" tabindex="2" class="validate"></input></span>
    </div>
    Digitizing
</label>

JS :

$(function(){
$('label[for=rdBtnDigitize]').html('Screen Printing');
});

Fiddle : http://jsfiddle.net/xb1kv06g/

Upvotes: 1

Views: 1370

Answers (2)

errand
errand

Reputation: 980

changed your selector for better reading. since your radio button has an id, it would be sufficient to use this as selector so $('#rdBtnDigitize') would do the work.

then we just insert this after the input element and... there you go...

$('#rdBtnDigitize').after("<label for='rdBtnDigitize'>Screen Printing</label>");

you could even change it to automatic labelling (http://jsfiddle.net/xb1kv06g/5/):

$("input[type='radio']").each(function (index) { //loop through every radio input field
  var curID = $(this).attr('id'), //save current ID
  label = $("<label>");  //create label element
  label.attr("for", curID); //define for attribute and connect with radio id
  label.text("label #" + index); //enter label text
$(this).after(label); //insert after the radio button

});

of course, this solution gives unusable label names - this is where you have to change the code and get a label name from somewhere...

Upvotes: 0

palaѕн
palaѕн

Reputation: 73966

You can try this:

$(function () {
    $('.radio')[0].nextSibling.data = 'Screen Printing'
});

FIDDLE DEMO

Upvotes: 3

Related Questions