多个组的jquery单选按钮答案

【问题标题】：jquery radio button for multiple groups多个组的jquery单选按钮
【发布时间】：2011-06-26 12:10:00
【问题描述】：

我正在使用 jquery 来设置单选按钮的样式，但如果一个有多个组，它就不起作用 - 这意味着现在一次只能设置一个元素的样式。

我在代码中有：

<script type="text/javascript">
    $(document).ready(function(){

        $(".RadioClass").change(function(){
            if($(this).is(":checked")){
                $(".RadioSelected:not(:checked)").removeClass("RadioSelected");
                $(this).next("label").addClass("RadioSelected");
            }
        });
    });
</script>

在 html 中：

<input id="Radio1" type="radio" class="RadioClass" name="group1" >
<label id="Label1" for="Radio1" class="RadioLabelClass">Radio 1</label>
<input id="Radio2" type="radio" class="RadioClass" name="group2"/>
<label id="Label2" for="Radio2" class="RadioLabelClass">Radio 2</label>
<input id="Radio3" type="radio" class="RadioClass" name="group1"/>
<label id="Label3" for="Radio3" class="RadioLabelClass">Radio 3</label>

好吧，例如，在我有group2 的地方，无线电图像不会根据 jquery 改变。关于如何使它适用于不同的组名的任何想法？

【问题讨论】：

它会从每个 RadioClass 类的单选按钮中删除 RadioSelected，您是否只希望它从当前组中选定的单选按钮中删除它？
没错，最好只从当前组中删除它！:)

标签： jquery radio-button

【解决方案1】：

不是很可靠的作品

$(".RadioClass").change(function(){ ...

最好替换

$(".RadioClass").click(function(){ ...

【讨论】：

【解决方案2】：

试试这个，

$(".RadioClass").change(function(){
if($(this).is(":checked"))
{
    var groupName = $(this).attr("name");
    $(".RadioClass").each(function(idx)
     {
         if($(this).attr("name") == groupName)
         {
             $(this).next("label").removeClass("RadioSelected");
         }
     });


    $(this).next("label").addClass("RadioSelected");
}
});

编辑：我还意识到仅按名称选择元素可能更快。

$(".RadioClass").change(function(){
if($(this).is(":checked"))
{
    var groupName = $(this).attr("name");
    $("[name='"+groupName+"']").next("label").removeClass("RadioSelected");

    $(this).next("label").addClass("RadioSelected");
}
});

【讨论】：