Question

I need some help. I have a div inside which there are some radio buttons generated dynamically with a piece of text next to each radio button also generated dynamically, inside a element, like below:

<div class="mother_div"> 
   <input type="radio" class="child_radio" name="amount" value="0" />
   <span class="child_text">0.0 some text</span>
   <input type="radio" class="child_radio" name="amount" value="1" />
   <span class="child_text">1.0 some text</span>
   <input type="radio" class="child_radio" name="amount" value="2" />
   <span class="child_text">2.0 some text</span>
   <input type="radio" class="child_radio" name="amount" value="3" />
   <span class="child_text">3.0 some text</span> 

I need a Jquery method or function that would allow me to start with the mother_div and upon user clicking/checking a radio button (they are all unchecked to start with), to replace the text inside the span with the “child_text” class with a different string of HTML.

What I tried so far is this, but it doesn’t work:

$("div.mother_div input:radio[name=child_radio]").click(function() {
    var newHTML= "some HTML to insert";
    $(span.child_text).html(newHTML);
});

Any thoughts or suggestions highly appreciated.

Answer 1

Try this

$("div.mother_div input").click(function() {
   var newHTML= "some HTML to insert";
   //this will change text next to radio button clicked
   $(this).next('span.child_text').html(newHTML);  

   //this will change text next to all the radio buttons
   $(this).parent().children('span.child_text').html(newHTML);
});

Your Selector is invalid. You can check change clicked one only or change all demo on jsFiddle.net

Hope this works for you.