我有一个带有单选按钮列表和“选定搜索”区域（ ）的DIV。 单击“所选搜索”区域时，会出现一个下拉层，其中包含带有单选按钮列表的DIV。 选择单选按钮后，“选定搜索”区域将使用该单选按钮的文本进行更新，并且下拉层会折叠/消失。
这是我的HTML结构：
A
知道如何使用jQuery实现这一目标吗？ 任何帮助将不胜感激。
谢谢。
**编辑**
自从我在2010年回答这个问题后，我现在对jQuery进行了一些改进，所以这里有一个修改后的标记，因为上面的那个并不理想。
新的HTML结构：
A
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 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/
这是一个JsFiddle的例子 ：
（演示似乎已从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(); });
这应该让你顺利：
$('span.selected-search').click(function(){ this.next('div.radio-btns-wrapper').toggle(); });
查看有关切换选项的文档： http ： //api.jquery.com/toggle/
另请注意，这仅在您要显示的范围在选定搜索范围之后立即出现时才有效
需要了解更多jQuery教程分享单选按钮和更新，都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
以上就是jQuery教程分享单选按钮和更新相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/981100.html