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/
You can try this:
$(function () {
$('.radio')[0].nextSibling.data = 'Screen Printing'
});
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...
