Радио кнопка JQuery для нескольких групп

Question

Я использую 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.Любая идея о том, как я могу заставить его работать для разных имен групп?

Answer 1

не очень надежные работы

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

лучше заменить

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

Answer 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");
}
});