Jquery - Removing class on CHECKED/UNCHECKED RADIO BUTTONS

Question

It's been 5 hours since i'm struggling with this, i searched up and down overhere. I'm trying to change the TABLE CELL BACKGROUND that contains a CHECKED RADIO. I manage to add the background class but i can't remove it's background when Unchecked.

Here is the code i'm using:

http://jsfiddle.net/ceWbW

Anyway to remove the background class after radio is unchecked ? I did not manage to do it. Thanks!

Answer 1

$("td input:not(:checked)") binds the event only to unchecked elements.

Bind it to all td input elements and use this.checked inside the callback to access the checked state.

Here's an example: http://jsfiddle.net/ceWbW/5/

$("td input").change(function () {
    var $this = $(this);
    var td = $this.parent();
    // un-green all columns which contain a radio element from the same group
    td.siblings().filter(function() {
        return !!$(this).find('input[name="'+$this.attr('name')+'"]:radio').length;
    }).removeClass('green');
    // green the current column in case the radiobox is enabled
    if(this.checked) {
        td.addClass('green');
    }
});