2012-02-01 80 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); 
});