When I click in one of the table cells, radio buttons appear. I have to select a radio button and **click on the table cell** in order to change the text and background color of the cell. What I want is to change this immediately once i choose a radio button. I don't want to click on the table cell in order to display the value and background color.

Below is sample code:

1.     function deselect(index, name) {
2.      var app = "#app"+index;
3.      var radioGroupName = name+'rOptions';
4.         $("#app"+index).removeClass("selected");
5.         
6.         if ($('input[name='+radioGroupName+']:radio:checked').val() == 0)
7.         {
8.          $("#app"+index).get(0).innerHTML = $(app).attr('name');
9.          $("#app"+index).css("background-color", 'white');
10.          $("#app"+index).css("color", 'blue');
11.          document.getElementById("SID"+index).value = "0";
12.         }
13.         else if ($('input[name='+radioGroupName+']:radio:checked').val() > 0)
14.         {
15.          $("#app"+index).get(0).innerHTML = $(app).attr('name') + " " + $('input[name='+radioGroupName+']:radio:checked').attr('title');
16.          $("#app"+index).css("background-color", 'cyan');
17.          $("#app"+index).css("color", 'white');
18.          document.getElementById("SID"+index).value = $('input[name='+radioGroupName+']:radio:checked').val();
19.         }
20.     }

Here is the actual working sample in jsfiddle : http://jsfiddle.net/Ey4fa/442/

Thanks.