首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如果选择了另一个具有不同名称的单选按钮,如何取消选择该单选按钮

如果选择了另一个具有不同名称的单选按钮,如何取消选择该单选按钮
EN

Stack Overflow用户
提问于 2013-10-29 21:45:00
回答 2查看 524关注 0票数 0

我有一组用于不同餐点的单选按钮,我希望它们对每一组都有不同的名称。

这是我所拥有的图片。

他们只能选择主餐、土豆夹克或沙拉。

如果他们试图选择一种主菜,那么他们就会改变主意,选择一种需要取消选择主餐的沙拉。

单选按钮的标签如下所示:

组1:lunch_main组2:lunch_jacketpotato组3:lunch_salad

有没有办法做到这一点?

EN

回答 2

Stack Overflow用户

发布于 2013-10-29 21:46:53

这不是单选按钮的工作方式。与其给出不同的名称,不如给出不同的data-*属性。通用name属性保留了无线电功能,而自定义data-* attr将为您提供您正在寻找的东西,而无需JS!

可以使用自定义data属性,如下所示:

代码语言:javascript
运行
复制
<input type='radio' name='lunch' data-mealType='lunch' />
<input type='radio' name='lunch' data-mealWhatever='cool' />
票数 3
EN

Stack Overflow用户

发布于 2013-10-29 21:58:34

这是我对你提出的问题的解决方案:

代码语言:javascript
运行
复制
$("input:radio").change(function(){
        var currentGroupName = $(this).prop("name");        
        $("input:radio").not(this).prop('checked', false);
    });

我依赖于排除被点击的项目,并选择除当前组名称之外的所有单选按钮,并删除“checked”属性。不是最好的代码,但完全符合您的问题。

我已经为你做了一个活生生的样本,这是小提琴:http://jsfiddle.net/EhHpy/

更新:这里是一个新的工具,让逻辑只对你的目标群体起作用,并避开其他群体(如我的例子中的链接饮料):http://jsfiddle.net/EhHpy/1/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19659947

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档