CODEWITHSUNDEEP
javascriptasp.net
windowsgm
windowsgm

Reputation: 1616

Radiobuttons Checked Associated with Background Color

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.

Example 1

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.

Example 2

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).

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.

CODE

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.

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 <= 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");

      }
  }

UPDATE

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!

Upvotes: 0

Views: 396

Answers (2)

windowsgm
windowsgm

Reputation: 1616

Was an issue with my button causing a postback as I suspected. Strange that the checkboxes didn't reset but once I made sure there was no post back, worked like a charm!

Upvotes: 0

Euimin Jung
Euimin Jung

Reputation: 11

The code that you posted changes the selected radio button's background to blue. But it does not change the background color of unselected radio button to white. (meaning that some other code is doing that)

The code that you posted does look fine. It will change the background color of selected radio button to blue. So the problem is probably at the code that turns the background color to white when a radio button gets unselected.

How exactly are you changing the background color to white? You should take a look at that code or post that code here for more help :D

Upvotes: 1

Related Questions