checkbox onClick - tr bg change

yoyo · #1 (**permalink**) 05-18-05, 07:58 AM

This changes the tr bg color when i click on the checkbox:

PHP Code:


			


<table>

<tr id="yoyo">

<td>

<input type="checkbox" onClick="document.getElementById('yoyo').style.backgroundColor='#84C1DF';">

</td>

<td>TEST TEST</td>

<td>TEST</td>

</tr>

</table>

How can I change the tr bg color to #FFFFFF when i uncheck the box?

kjmatthews · #2 (**permalink**) 05-18-05, 08:29 AM

Since you are using Javascript to change the box color in the first place, I would recommend asking the Javascript community how to use Javascript to change it back.

Also, won't what you posted change the color of the whole table row (not just the checkbox)? I see that the answer is yes.

Anyway, I just googled a bit - I suppose you could have done that yourself - and found this at http://www.ozzu.com/ftopic22858.html:

Code:

//make a function to toggle the class given to the checkbox
//this would go in the <head> of your HTML document
<script type="text/javascript">
function toggle(box,theId) {
   if(document.getElementById) {
      var cell = document.getElementById(theId);
      if(box.checked) {
         cell.className = "on";
      }
      else {
         cell.className = "off";
      }
   }
}
</script>

<style type="text/css">
 /* now we define how these classes are styled */
 .on {background-color:#84C1DF;}
 .off {background-color:white;}
</style>

Then, to make it all work, you would write the checkboxes this way:

Code:

<tr id="yoyo">
 <td class="off" id="cell1">
  <input type="checkbox" onclick="toggle(this,'yoyo')">Yada Yada Yada
 </td>
</tr>

The Javascript folks might be able to give you a better answer.