異なるラジオボタンを選択するとクラスを削除します

Question

同じグループの別のラジオボタンをチェックするときにクラスを削除できません。今は、クラスは固執して決して遠ざかりません。

$(function(){ 

$('input[name=radio]').change(function(){   
     if($(this).is(":checked")){ 
       $(this).closest('div').addClass("payBoxSelected"); 
      } else { 
       $(this).closest('div').removeClass("payBoxSelected"); 
      }            
    }); 

}); 

これはなぜ機能しないのでしょうか？

Answer 1

をそれは他のラジオが変更されていないことを確認しています（したがって、固まっているようです）。最初にすべてのクラスを削除して、チェックされたラジオだけに必要なクラスを追加するのはどうですか？

これを試してみてください：

$('input[name=radio]').change(function(){ 
    //first remove class from all 
    $('input[name=radio]').closest('div').removeClass("payBoxSelected");   

    //now add the class to checked radio 
    if($(this).is(":checked")){ 
     $(this).closest('div').addClass("payBoxSelected"); 
    }            
}); 

Answer 2

それが最善の方法かどうか分からないのですが、これは動作します：

var inputs$ = $('input[name=radio]'); 
inputs$.change(function() { 
    inputs$.each(function (index, el) { 
     if ($(el).is(":checked")) { 
      $(el).closest('div').addClass("payBoxSelected"); 
     } else { 
      $(el).closest('div').removeClass("payBoxSelected"); 
     } 
    }); 
}); 

Answer 3

この試してみてください：あなたが唯一の（追加または削除）ラジオのクラスを変更しているので

$(document).ready(function() { 
    $('input[type=radio]').click(function() { 
     $('input[name='+$(this).attr('name')+']:not(:checked)').removeClass("payBoxSelected"); 
     $('input[name='+$(this).attr('name')+']:checked').addClass("payBoxSelected"); 
    });  
});​