Change td backcolor on RadioButton click

[Iamthestig]

I have been asked to change our intranet to change the background color of cells when a radiobutton is clicked. There are 160 radio buttons and I'm looking of a way to do this with minimal code changes. Here is an example:

 <!-- Question 1 -->
<tr  valign="top">
  <td class="style20">
    <asp:Textbox runat="server" ID="txtqDesc1" Width="120px" CssClass="TableContent" Text=" " Wrap="true" TextMode="MultiLine" ReadOnly="true" Height="50px"/>
    <asp:Textbox runat="server" ID="txtQNo1" Visible="false" Text="" />
  </td>
 <td class="TableContent" runat="server" id="MyCell" align="left" height="80">
    <asp:Label runat="server" ID="txtAnswer1_0" Visible="true" Text="Question 1"/>
    <asp:RadioButton runat="server" ID="radAnswer1_0" GroupName="Q1" onclick="javascript:MyCell.style.background=gray';" />
 </td>
 <td class="TableContent" align="left" height="80">
    <asp:Label runat="server" ID="txtAnswer1_1" Visible="true" Text="Question 2"/>
    <asp:RadioButton  runat="server" ID="radAnswer1_1" GroupName="Q1"/>
 </td>
 <td class="TableContent" align="left" height="80">
   <asp:Label runat="server" ID="txtAnswer1_2" Visible="true" Text="Question 3/>
   <asp:RadioButton  runat="server" ID="radAnswer1_2" GroupName="Q1"/>    
 </td>

So I can give my td an ID ("MyCell") and use the onclick of the radiobutton to change the cell but I don't want to do this 160 times. Is there a way to use onclick and get the parent td of the radiobutton?
I will also need to reset the backcolor when a different radiobutton is clicked.

Thanks for any help.

 

[jbenson001]

The way to do this is assign the click event using javascript or better yet JQuery. JQuery makes it easy to select all radiobuttons on a page, or within another control, like your table. Once selected you just bind the click event to it and call your code:

http://api.jquery.com/find/

 

[Iamthestig]

Thanks for the pointer. I have managed to find some code that will highlight a group (or row in my case) of cells when one of the radio buttons is selected, but I only want the cell <td> highlighted which has the checked radio button. Can anyone tweak this code to highlight just the <td> with the checked radio button?

 $(document).ready(function() {

		        var groups = {};

		        $(":radio").each(function() {
		            groups[this.name] = true;
		        });


		        for (var group in groups) {
		            var radioButttons = $(":radio[name=" + group + "]:checked").val();
		            isChecked = !!radioButttons;
		            if (!isChecked) {
		                $(":radio[name=" + group + "]").closest("td").removeClass('style1');
		            }
		            else {
		                $("input:radio[name=" + group + "]").closest("td").addClass('style1');
		            }
		        }
		        return false;
		    });

 

[Iamthestig]

Ok, please ignore my last post.

This is working:

   $(document).ready(function() {
                $("input:checked").closest("td").addClass('style1');
		    });

		    $(document).click(function() {
		        $('input:radio').change(function() {
		            $('td.style1').removeClass('style1');
		            $("input:checked").closest('td').addClass('style1');
		        });
		    });

 

[ChrisHirst]

jQuery for something so simple????

function setBG(p_Ele, p_Colour) {
if (p_Ele.value='checked') {
       p_Ele.parent.style.background-Color = '"' + p_Colour + '"';
    }
}

then call setBG(this,[#colour code or colour name]); in the radio onclick event

not 100% tested just written on the fly.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Iamthestig]

Nice solution except I have 160 radio buttons and would have to add 160 onclick events. And what if they decide to change the colour?

 

[ChrisHirst]

And what if they decide to change the colour?

Make it a global variable.


Run a function to add a event listener to every radio button in the document when the document loads.

var radioButtons = document.getElementsByName("radio");
    for (var i = 0; i < radioButtons.length; i++) {
         radioButtons[i].addEventListener('click',setBG(p_Ele, p_Colour),false)
    }

Should add an onclick event to all radio buttons.

I'll let you debug any missing brackets and such.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum