Question

What I’m trying to do is have the user click a table which selects a radio button inside that table and then add a class to the table that was selected. Then if the user selects another table when that radio is checked the class will be added, but the class from the previously selected table/radio needs to be removed as well.

Right now most of that works, accept when I select another radio the previous class isn’t removed. Only if you toggle the radio is it removed.

Here’s a link to a demo on jsfidd where you can see all the html and other JS.

$(function() {

    $('table').click(function(event) {

        if (event.target.type != "radio") {

            var that = $(this).find('input:radio');

            that.attr('checked', !that.is(':checked'));

            if (that.is(':checked')) {
            that.closest('table').addClass('selected');
            }
            else {
                that.closest('table').removeClass('selected');
            }
        }

    });
});

I also forgot I was using another version before I modified it into that. In this one if you actually click the radio button the style will add/remove correctly but not when you click the table. I attempted to combine the two and thats how I got the function I posted above..

This is the link to the jsfiddle with that demo and here is the jquery I used too.

// jQuery to select radio button within clicked table
$(function() {

$('table').click(function(event) {  

    if(event.target.type != "radio") {

        var that = $(this).find('input:radio');
        that.attr('checked', !that.is(':checked'));

    }
});
});

// jQuery to change the style of the table containing the selected radio button
$(function() {
$('input[type="radio"]').change( function() {
  //   grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');

    for (var i=0; i < this_radio_set.length;i++) {
    if ( $(this_radio_set[i]).is(':checked') )         
      $(this_radio_set[i]).closest('table').addClass('selected');
        else 
        $(this_radio_set[i]).closest('table').removeClass('selected');
}
});
}); 

Answer 1

You’ll need to do something like this:

$(this).closest('.container').addClass('selected').parent().siblings().each(function() {
    $(this).find('.container').removeClass('selected');
});

And a demo: http://jsfiddle.net/cGTYm/22/