选择单选按钮＆amp; <span>更新</span>

Question

我有一个带有单选按钮列表和“选定搜索”区域（<span>）的DIV。单击“选定的搜索”区域时，会出现一个下拉层，其中包含带有单选按钮列表的DIV。选择单选按钮后，“选定搜索”区域将使用该单选按钮的文本进行更新，下拉层将折叠/消失。

这是我的HTML结构：

<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实现这一目标吗？任何帮助将不胜感激。

感谢。

**编辑**

自从我在2010年回答这个问题后，我现在对jQuery进行了一些改进，所以这里有一个修改后的标记，因为上面的标记并不理想。

新的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脚本：

这是@Greg在下面的答案的改进：

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

另请注意，只有在您选择搜索范围

之后立即显示要显示的范围时，此功能才有效