Radiobuttons Checked Associated with Background Color
<p>I have 2 columns of radio buttons. Select one on the left, the corresponding right one becomes unchecked and vice versa. I then added in some Javascript so that the currently selected radiobuttons background is blue, the other white. This worked fine. Then I added in two buttons, one to make all the radiobuttons on the left checked and the other to check all the radio buttons on the right. This is where my problem comes up. Whenever I use the buttons the radiobuttons become checked correctly, but the background colours never display correctly.</p>

<p><strong>Example 1</strong></p>

<p>When I have column 1's radiobuttons checked and their background blue on start up and then press the button to activate column 2, column 2's radiobuttons all become checked, its background flickers to blue for a moment, then column 1's background remains blue.</p>

<p><strong>Example 2</strong></p>

<p>On start up I have column 1's radiobuttons checked but haven't affected its background colour and then press the button to activate column 2, column 2's radiobuttons all become checked, its background flickers to blue for a moment, then returns to white. Same affect if I now click column 1's button (Radios become selected, flickers blue, returns to white).</p>

<hr>

<p>What could be there problem? I thought perhaps it could have been a postback but surely the radios checked value would have refreshed also so I don't think it is. Any help would be greatly appreciated.</p>

<p><strong>CODE</strong></p>

<p>This is the Button for selecting a column. The control that the function is passed is just a This (so the button that's been clicked). It's a little complicated as the radiobuttons are dynamically created. The gist is figures out which button was pressed, then loops through the relevant radiobuttons and checks them, and recolors the background of its parent's parent (td element)... if that makes sense.</p>

<pre><code>function ColumnBtnSelect(control) {
  var btnNum = (control.id).substring((control.id).length - 1, (control.id).length);
  var objPart = "ctl00_ContentPlaceHolder1_GridView1_ctl";
  var objName;
  for (x = 3; x &lt;= 15; x++) {
      if (btnNum == 1) {
         var num1 = "0" + x;
         objName = objPart + num1.substr(num1.length - 2) + "_" + ((x - 3) * 2);

         document.getElementById(objName).checked = true;
         $(document.getElementById(objName)).parent().parent().css("background-
color", "#A9D0F5");   


      }
      else {
         var num1 = "0" + x;
         objName = objPart + num1.substr(num1.length - 2) + "_" + (((x - 3) * 2) + 1);

         document.getElementById(objName).checked = true;
         $(document.getElementById(objName)).parent().parent().css("background-
color", "#A9D0F5");

      }
  }
</code></pre>

<p><strong>UPDATE</strong></p>

<p>After reading your suggestions I took a look back at my code. I had another javascript function that set the corresponding radiobutton to white, but since I tried Example 2 I've had it commented out, meaning no where in my code do I set anything to white at the moment but even still the rows seem to switch to blue momentarily then turn back to white. Very strange. I also checked my CSS in Firebug. All of the td elements (which should be blue but are actually white) don't seem to list any setting of the background-color, neither white not blue. This looks as though it's not being overridden but returning to default maybe? Whatever the case, I'm stumped!</p>
