?
Solved

Need an OnUnClick option

Posted on 2010-01-12
3
Medium Priority
?
762 Views
Last Modified: 2012-05-08
I found a javascript so when someone clicks on a radio button it shades the cells in that row.  I want the cells to un-shade when a different radio button is selected. How do i make the javascript stop working when a different radio button is unselected?

<script type='text/javascript'>
function highlight_background(idno)
{
         var theArray = document.getElementsByTagName('tr');
        for (var i=0; i<theArray.length; i++) {
              if (theArray[i].className.indexOf(idno) != -1 && theArray[i].className.indexOf('highlightTR') == -1) {
                    theArray[i].className = (theArray[i].className == "")? "highlightTR" : " highlightTR";
              }
        }
        return false;          
}</script>
<style>
.highlightTR { background-color:#BFFFBF; }
</style>

<table><tr class='TOPCLIENT'><td>
<input type="radio" name="FieldID" onClick="javascript:highlight_background('TOPCLIENT');"/>
</td></tr><tr class='TOPCLIENT'><td>
<input type="radio" name="FieldID" >
</td></tr></table>

0
Comment
Question by:Mannezman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 7

Expert Comment

by:cstsang
ID: 26299815
In fact, there are no OnUnClick event, you can use the .checked attribute to check whether the radio button is checked.Here is my demostration.

<style>
.highlightTR { background-color:#BFFFBF; }
</style>

<script type='text/javascript'>
function highlight_background(id,v)
{
    var t=document.getElementById("t1"); 		
    for (x=0;x<t.rows.length;x++)
    {
	    r=t.rows[x];
	    if ((r.id=="r"+id) &&(v.checked))
		    r.className="highlightTR"; 
	    else
	    	r.className=""; 
    }   
	return false;          
}
</script>
<table id="t1">
	<tr class='TOPCLIENT' id="r1">
		<td>
			<input type="radio" name="FieldID" onClick="javascript:highlight_background(1,this);"/>
		</td>
	</tr>
	<tr class='TOPCLIENT' id="r2">
		<td>
			<input type="radio" name="FieldID" onClick="javascript:highlight_background(2,this);">
		</td>
	</tr>
</table>

Open in new window

0
 
LVL 22

Accepted Solution

by:
kadaba earned 2000 total points
ID: 26299851
how about this.

<html>
<head>
<script type="text/javascript">
function highlightTr(radioObj){
	var tableObj = radioObj.parentNode.parentNode.parentNode;//radio-->td-->tr-->table
	var trArray = tableObj.getElementsByTagName('tr');
	for(var i=0;i<trArray.length;i++){
		trArray[i].style.backgroundColor = "";
	}
	radioObj.parentNode.parentNode.style.backgroundColor="#BFFFBF";
}
</script>
</head>
<body>
<table width="100%" border="1">
	<tr>
		<td>Cell 1</td>
		<td>Cell 2<input type="radio" name="radioTr" onclick="highlightTr(this);"></td>
	</tr>
	<tr>
		<td>Cell 3</td>
		<td>Cell 4<input type="radio" name="radioTr"  onclick="highlightTr(this);"></td>
	</tr>
	
	<tr>
		<td>Cell 5</td>
		<td>Cell 6<input type="radio" name="radioTr"  onclick="highlightTr(this);"></td>
	</tr>

	<tr>
		<td>Cell 7</td>
		<td>Cell 8<input type="radio" name="radioTr"  onclick="highlightTr(this);"></td>
	</tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 22

Expert Comment

by:kadaba
ID: 26299880
@cstang

you should have this in your code:

if ((r.id=="r"+id) &&(v.checked)){
   r.defaultClassName = r.className;
  r.className="highlightTR";
}else{
  r.className = r.defaultClassName;
}

as  class='TOPCLIENT' will be lost when you clear the class name

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question