ラジオボタンが選択されていると<span>が更新されました

Question

ラジオボタンのリストと「選択された検索」エリア（<span>）を持つDIVがあります。 「選択された検索」エリアをクリックすると、ドロップダウン・レイヤーが表示され、DIVにラジオ・ボタンのリストが表示されます。ラジオボタンが選択されると、「選択された検索」領域がそのラジオボタンのテキストで更新され、ドロップダウンレイヤーが崩壊/消滅します。

<div class="radio-btns"><span class="selected-search">A</span> 
<div class="radio-btns-wrapper"> 
    <label><input type="radio" value="a" id="a" checked>A</label> 
    <label><input type="radio" value="b" id="b">B</label> 
    <label><input type="radio" value="c" id="c">C</label> 
    <label><input type="radio" value="d" id="d">D</label> 
</div> 
</div> 

任意のアイデアはどのようにjQueryを使ってこれを実現するために：

は、ここに私のHTML構造ですか？どんな助けでも大歓迎です。

ありがとうございました。

** EDIT **

は、私が2010年に戻ってこの質問をしたので、私は今のjQueryのビットを改善しているので、上記の1が理想的ではないので、ここで修正されたマークアップです。

新しいHTML構造：

<a href="#" class="selected-search">A</a> 
<div class="radio-btns-wrapper"> 
    <label><input type="radio" value="a" id="a" name="radio" checked>A</label> 
    <label><input type="radio" value="b" id="b" name="radio">B</label> 
    <label><input type="radio" value="c" id="c" name="radio">C</label> 
    <label><input type="radio" value="d" id="d" name="radio">D</label> 
</div> 

jQueryのスクリプト：

これは、以下のグレッグの答え@上の改善である：

//If JS is available, hide the radio buttons container 
$(".radio-btns-wrapper").hide(); 

//DIV with radio buttons will slide down when clicking on .selected-search 
//The default action on the link <a> is removed (preventDefault();) to avoid having the page jump to the back top 
$(".selected-search").click(function (e) { 
    $(".radio-btns-wrapper").slideDown(); 
    e.preventDefault(); 
}); 
//Click on radio button and have target text update with radio button's text 
$("input[type=radio]").click(function() { 
    // Alter the text of the span to the text of the clicked label 
    $(".selected-search").text($(this).parent().text()); 
    // Now hide the radios 
    $(".radio-btns-wrapper").slideUp(); 
}); 

とでデモするためのリンクから選択された答えはもう働かない、私は自分のデモを作成しました。あなたはここでそれを見ることができます：http://jsfiddle.net/rzea/vyvLvgkh/4/

Answer 1

ここJsFiddleは例である：

http://jsfiddle.net/g105b/VHBkP/（デモはjsfiddle.netから削除されているように見えます）

はここで働いて、デモへのリンクです：http://jsfiddle.net/rzea/vyvLvgkh/5/からは改善マークアップと新しいスクリプトの上編集を参照してください。

$(".radio-btns").click(function() { 
    $(".radio-btns-wrapper").toggle(); 
}); 

$("input[type=radio]").click(function() { 
    // Alter the text of the span to the text of the clicked label. 
    $(".selected-search").text($(this).parent().text()); 
    // Now hide the radios. 
    $(".radio-btns-wrapper").hide(); 
}); 

Answer 2

これはあなたの方法であなたを取得する必要があります。

$('span.selected-search').click(function(){ 
    this.next('div.radio-btns-wrapper').toggle(); 
}); 

がトグルするためのオプションのためにドキュメントをチェックアウト：http://api.jquery.com/toggle/

はまたスパン場合にのみ動作することに注意してください選択した検索スパンの直後に発生見せたい