How to rename label on radio button using jquery

Question

Hi i have the following

<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue  name=radioOpt    value=1 CHECKED type=radio>&nbsp;Option1
</label>
<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue  name=radioOpt    value=2 CHECKED type=radio>&nbsp;Option2
</label>
<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue  name=radioOpt    value=3 CHECKED type=radio>&nbsp;Option3
</label>

I want to rename option x to test x base on some event.

var radioOpt = $("input[name=radioOpt][value=1]"); 

would give me radio button. How would i rename its label?

Answer 1

If you dont want to change the markup, You can do the following to Change that text for this case

$(function(){
     $("input[name=radioOpt][value=1]")
      .parent()
      .contents()
      .last()[0].nodeValue = 'Test 1';
});

DEMO http://jsfiddle.net/joycse06/U7TMs/

Answer 2

Try like below,

$(function () {
    $("input[name=radioOpt]").parent().contents().each(function () {
        if (this.nodeType == 3 && this.nodeValue.indexOf('Option') != -1) {
            this.nodeValue = 'Test';
        }
    });
});

DEMO: http://jsfiddle.net/skram/Cgv2f/2/

Answer 3

I'd suggest the following:

var labelForOpt = radioOpt.parent();

However the label should, for accessibility reasons, have for attribute, to specify to which input it 'belongs', for example:

<label for="radioElement1">For radio One:</label>
<input id="radioElement1" />

This means that you don't have to nest the input within the label, and clicking the label will trigger a click on the associated input.

It's also worth pointing out that your HTML is invalid:

<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue ) name=radioOpt value=1 CHECKED type=radio>&nbsp;Option1
</label>

There shouldn't be a floating ) inside of the HTML for the input element.

Answer 4

Try this :

HTML :

    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue ) name=radioOpt    value=1 CHECKED type=radio id="op1"><label for = "op1">Option1
</label>
<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class="fieldValue" name="radioOpt" id="op2"   value="2" CHECKED type="radio"><label for = "op2">Option2
</label>
<label>
    <INPUT id="op3" style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue ) name=radioOpt    value=3 CHECKED type=radio><label for = "op3" >Option3

</label>​

jQuery:

$("input[name=radioOpt]").click(function(){
    var id = $(this).attr('id');
    $('label[for='+id+']').text('test_'+$(this).attr('value'));
});
​

Here is the DEMO

Answer 5

radioOpt.closest("label");

This will give you the closest label element which is an ancestor of the selected element (or the element itself, but this is not the case). You can then replace the text using .html(function) or by iterating over .contents(), filtering the text nodes (where this.nodeType=== 3) and replacing the value.

Unrelated with your actual question, but I'd like to inform you that there are quite a few markup errors in your HTML. There shouldn't be a ) after the class attribute, you can't check more than one radio button with the same name and it's a bad idea to use inline styling when you can use a class to style them with CSS.

<label>
    <input type="radio" name="radioOpt" class="fieldValue" value="1" checked/> Option1
</label>
<label>
    <input type="radio" name="radioOpt" class="fieldValue" value="2"/> Option2
</label>
<label>
    <input type="radio" name="radioOpt" class="fieldValue" value="3"/> Option3
</label>

Then, put the styling in a CSS stylesheet:

input.fieldValue {
    display: inline;
    vertical-align: middle;
}