单选按钮已选择& < span>更新 [英] Radio button selected & <span> updates

问题描述

我有一个带单选按钮列表和选定搜索"区域(<span>)的DIV.单击选定的搜索"区域时，会出现一个下拉层，并带有带有单选按钮列表的DIV.选择单选按钮时，选择的搜索"区域将使用该单选按钮的文本进行更新，并且下拉层折叠/消失.

I have a DIV with a list of radio buttons and a 'selected search' area (a <span>). When clicking on the 'selected search' area, a drop down layer comes out and has the DIV with the list of radio buttons. When a radio button is selected, the 'selected search' area is updated with that radio button's text and the drop down layer collapses/disappears.

这是我的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完成吗?任何帮助将不胜感激.

Any idea how to accomplish this with jQuery? Any help will be greatly appreciated.

谢谢.

自从我在2010年问这个问题以来，我现在在jQuery方面已有一些改进，因此，由于上面的代码并不理想，因此这里是经过修订的标记.

Since I asked this question back in 2010 I have now improved in jQuery a bit, so here's a revised markup since the above one isn't ideal.

新的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的以下回答的改进:

This is an improvement on @Greg's answer below:

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

And since the link to demo in the selected answer doesn't work anymore, I created my own demo. You can see it here: http://jsfiddle.net/rzea/vyvLvgkh/4/

推荐答案

这是一个带示例的JsFiddle :

http://jsfiddle.net/g105b/VHBkP/ (演示似乎已从jsfiddle.net中删除)

http://jsfiddle.net/g105b/VHBkP/ (demo appears to have been removed from jsfiddle.net)

以下是工作示例的链接: http://jsfiddle.net/rzea/vyvLvgkh/5/-有关改进的标记和新脚本，请参见上面的编辑.

Here's a link to a working demo: http://jsfiddle.net/rzea/vyvLvgkh/5/ - See edit above for improved markup and new script.

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

这篇关于单选按钮已选择& < span>更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！