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

Question

我有一组用于不同膳食的单选按钮，我想让他们为每个小组设置不同的名称。

这是我所拥有的图像。

他们只能选择主餐，夹心土豆或沙拉。

如果他们试图选择一个主菜，那么改变他们的想法，选择一个沙拉，取消选择主餐。

单选按钮标记如下，

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

有没有这样做？

Answer 1

这不是无线电按钮的工作方式。不是给出不同的名称，而是给出不同的data-*属性。常见的name属性保留了广播功能，而自定义data-* attr将为您提供所需的内容，而无需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/