2012-02-01 76 views
0

我需要一些帮助。我有一个div内部有各自旁边的单选按钮用一块文本的动态生成的一些单选按钮也动态生成的,一个元件的内部,象下面这样:JQuery选择单选按钮旁边的文本

<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> 

我需要一个Jquery的方法或函数将允许我从mother_div开始,并在用户单击/检查单选按钮(它们全部未选中时开始),以不同字符串的HTML替换span中的文本和“child_text”类。

我试过到目前为止是这样的,但它不工作:

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

任何想法或建议高度赞赏。

回答

1

试试这个

$("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); 
}); 

你的选择是无效的。您可以在jsFiddle.net上查看change clicked one onlychange all演示

希望这对您有用。

+0

非常感谢,伙计们。我最终使用了Amar的解决方案 - 像魅力一样工作!顺便说一句,我怎样才能使跨度中的HTML恢复到原来的单击另一个单选按钮? – Cucurigu 2012-02-01 07:10:23

+2

您可以将原始文本和单击的项目存储在某个变量中,并在需要时进行恢复。检查[这个演示](http://jsfiddle.net/y8yRn/4/)。另外,如果您对答案满意,请接受答案并阅读[FAQ](http://stackoverflow.com/faq#howtoask) – 2012-02-01 07:17:55

+0

再次感谢Amar!优雅的解决方案,非常棒! – Cucurigu 2012-02-01 15:50:01

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