javascript - 如果选择了另一个具有不同名称的单选按钮，如何取消选择单选按钮

Question

我有一组用于不同餐点的单选按钮，我想让它们为每组具有不同的名称。

这是我所拥有的图像。

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

如果他们尝试选择主餐，然后改变主意并选择它需要取消选择主餐的沙拉。

单选按钮标记如下，

第 1 组：lunch_main 第 2 组：lunch_jacketpotato 第 3 组：lunch_salad

有没有办法做到这一点？

Answer 1

这不是单选按钮的工作方式。与其给出不同的名称，不如给出不同的data-*属性。通用name属性保留无线电功能，而自定义data-*属性将为您提供所需的内容，无需 JS！

您可以data像这样使用自定义属性：

<input type='radio' name='lunch' data-mealType='lunch' />
<input type='radio' name='lunch' data-mealWhatever='cool' />

Answer 2

这是我对您提出的问题的解决方案：

$("input:radio").change(function(){
        var currentGroupName = $(this).prop("name");        
        $("input:radio").not(this).prop('checked', false);
    });

我依赖于排除单击的项目，然后选择那里的每个单选按钮，排除当前组名并删除“已选中”属性。不是最好的代码，但与您的问题完全匹配。

我为你做了一个现场样本，这里是小提琴：http: //jsfiddle.net/EhHpy/

更新：这是一个新的小提琴，让逻辑只适用于您的目标群体，并转义其他群体（如我的示例中的链接饮料）：http: //jsfiddle.net/EhHpy/1/