Question

I am developing a mobile application and I have a click function in jQuery that applies a class to a set of radio buttons and removes that class from other radio buttons on the page. I now have the use case where I have two sets of radio buttons, and now it the class removes all radio buttons not just the radio buttons in the current set.

I have setup a demo on JSFiddle which has two sets of radio buttons and you can see how they seem to be attached somehow, and I want to keep them inclusive. Hopefully this makes since, if you have any questions feel free to ask.

JSFiddle Code

Here is the jQuery code, check out the rest on JSFiddle.

$('.form-radios label').attr('checked', 'unchecked');

$(".form-radios label").click(function(){
       $(this).attr('checked', 'checked').addClass('checked');
       $('label').not(this).removeClass('checked');
});​

Answer 1

$(".form-radios label").click(function(){
       $(this).attr('checked', 'checked').addClass('checked')
              .siblings('label').removeClass('checked');
});​

siblings will get only elements which share the same parent element.

http://jsfiddle.net/qxV9c/2/

EDIT: With the new structure:

$(".form-radios label").click(function(){
    var $this = $(this);

    $this.closest(".form-radios").find("label").removeClass('checked');
    $this.attr('checked', 'checked').addClass('checked');
});​

http://jsfiddle.net/qxV9c/5/