A day with .Net

My day to day experince in .net

javascript code to check only one radio button and highlighting its table row

Posted by vivekcek on July 21, 2009

Another day i was stucked with a problem in this case my web page contains 10 radio buttons,in which only one should be

checked at a time also when a radio button is checked the table row in which it reside should by highlighted this process

also should done using client side javascript,To make the problem worse my tester told for enabling the auto post back of the

radio buttons for some input clearing purposes,if we set nything in client side by javascipt that will be losted after a

server post back but i solved this problem by some script and small CSS

For that add small style tag under title tag in HTML section as

.highlight { background-color: yellow; }

Below it add two javascript functions


function rowHighlight(obj) {
			if (obj.checked) {
				obj.parentNode.parentNode.className = 'highlight';
				
				
			}
			else {
				obj.parentNode.parentNode.className = '';
			}
			
			for(i = 0; i < document.forms[0].elements.length; i++)
                {
                    elm = document.forms[0].elements[i]
                        if (elm.type == 'radio')
                            {
                            if(!elm.checked)
                            {
                            elm.parentNode.parentNode.className = '';
                            }
                              
                            }
                }
		}
		


function show()
		{
		    var obj=document.getElementById('RdbFirst');
		    if(obj!=null)
		    {
		        if(obj.checked)
		        {
		         rowHighlight(obj);
		        }
		    }	
		    obj=document.getElementById('RdbSecond');
		    if(obj!=null)
		    {
		        if(obj.checked)
		        {
		         rowHighlight(obj);
		        }
		    }
		    
		    obj=document.getElementById('RdbThird');
		    if(obj!=null)
		    {
		        if(obj.checked)
		        {
		         rowHighlight(obj);
		        }
		    }

the function rowHighlight(obj) is called when we check a radio button for taht we have to add the following code in Page load

event


protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
RdbFirst.Attributes.Add(“onclick”, “rowHighlight(this);”);
RdbSecond.Attributes.Add(“onclick”, “rowHighlight(this);”);
RdbThird.Attributes.Add(“onclick”, “rowHighlight(this);”);
}
}

rowHighlight(obj) function check one radio button and highlight is residing row and then it unselect all other radio buttons

and remove the highlight of unselcted radio buttons parent row

The function show() is used to maintain the state at client side after post back

this function is called by

adding an on load event in body tag

one button

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s