Dynamically changing text on Radio Button Change using jQuery for multiple Radio groups

Question

I'm developing a Rails app and I've run into an issue that I can't seem to figure out.

I'm using the jQueryUI Accordion and I'm building the requisite structure by looping through an array I've got.

The HTML structure that the accordion needs is the following:

<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div> <h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>

So what I'm doing is creating a unique radio group within each content div. I want to make it so that when I select a radio option within one of the content divs, the text in the h3 header changes to the value of the radio option selected.

I want to use jQuery for this but I'm confused about how to; specifically I'm having a hard time understanding what selectors to use and how to refer to the h3 header sibling that the radio group div 'belongs' to. I'm also rather confused about how to handle it for the 11 different radio groups on the whole page, each within a content div.

Thanks in advance.

Answer 1

Ok so here is what you want to do...

$('input:radio').change(function(){
        $(this).parent().prev('h3').html($(this).val());
    });

So anytime a 'input:radio' is changed, jquery will take $(this) (the radio button you clicked), go up to its parent's div (hence .parent()), find the first previous h3 (which is .prev('h3')), then change the html to $(this).val() which is the value of the radio button that you clicked.

Note that if you ever add a or something more around the input, you would have to add another .parent() to go up one more level.

Also you could change .html() to whatever you want... html(), text(), ect..