• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 784
  • Last Modified:

Need an OnUnClick option

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
Mannezman
Asked:
Mannezman
  • 2
1 Solution
 
cstsangCommented:
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
 
kadabaCommented:
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
 
kadabaCommented:
@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

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now