When checkbox is selected backround is different

[motormichael12]

Can anyone tell me a script where when you click on a check box and it is selected it will change the background color of the <td> or <tr> box like in gmail.com and yahoo mail (main original version)?

[thetestingsite]

Try this:

<form>

<table>
 <tr id="example" style="background-color: #CCCCCC;">
   <td><input type="checkbox" name="check" value="yes" onclick="if (document.getElementById('example').style.background-color == '#CCCCCC') { document.getElementById('example').style.background-color = '#EEEEEE';} else {document.getElementById('example').style.background-color = '#CCCCCC';}"> Some text here test test test blahblahblah</td>
 </tr>
</table>

</form>

Probably not the cleanest way to do it, but it should work. Hope this helps.

[Veronica]

You can also do it with innerHTML

<script type="text/javascript">
function changeColor(){
	var origHTML = document.getElementById('colorMe').innerHTML;
	var newHTML = "<span style='background-color:red'>" + origHTML + "</span>";
	document.getElementById('colorMe').innerHTML = newHTML;
}
</script>
<input type='radio' onclick='changeColor()' value='Change Text'/>
<table>
<tr><td id="colorMe" style='background-color:#ffffff'>this is the table cell</td></tr>
</table>

[mburt]

<form>

<table>
<tr id="example" style="background-color: #CCCCCC;">
<td><input type="checkbox" name="check" value="yes" onclick="if (document.getElementById('example').style.background-color == #CCCCCC) { document.getElementById('example').style.background-color = #EEEEEE;} else {document.getElementById('example').style.background-color = #CCCCCC;}"> Some text here test test test blahblahblah</td>
</tr>
</table>

</form>

Hex values have to be strings. So:

if (condition) document.getElementBy(..).style.background = '#FF0000';

[thetestingsite]

Ah yes, forgot about those. Thanks, and it is fixed now in my above post.

[Twey]

The conditional operator exists to make things like this more readable:

<input type="checkbox" name="check" value="yes" onclick="
  var es = document.getElementById('example').style;
  es.backgroundColor = (es.backgroundColor === '#cccccc' ? '#eeeeee' : '#cccccc');
">

Also, in scripting the property is called backgroundColor, not background-color.

You can also do it with innerHTML

Although why on Earth you'd want to when there are non-innerHTML methods available is beyond me. See the SlayerOffice article Alternatives to innerHTML.
Also, <span> is an inline element, so the effect may be other than what the OP intended, if the element to be coloured is a block-level element.

[mburt]

It would even be pointless to rewrite existing nodes, when the attribute style.backgroundColor will work fine.
Also:

es.backgroundColor = (es.backgroundColor === '#cccccc' ? '#eeeeee' : '#cccccc');

Why would you need to return a boolean value?

es.backgroundColor = (es.backgroundColor == '#cccccc' ? '#eeeeee' : '#cccccc');

Wouldn't that work fine?

[Twey]

Any comparison returns a boolean value. === prevents type-casting when checking: (0 == "") returns true, but (0 === "") returns false. Using === wherever possible is good style since it reduces ambiguity and I suspect it to be slightly more efficient in most implementations, although I haven't run benchmarks.

[mburt]

Stupid me... So it reads strings differently then numbers.

[Veronica]

So just to help motormichael12... your final answer would be:

<table>
 <tr id="example" style="background-color: #CCCCCC;">
   <td><input type="checkbox" name="check" value="yes" onclick="
  var es = document.getElementById('example').style;
  es.backgroundColor = (es.backgroundColor === '#cccccc' ? '#eeeeee' : '#cccccc');
"> Some text here test test test blahblahblah</td>
 </tr>
</table>

yes?