PDA

View Full Version : When checkbox is selected backround is different



motormichael12
04-21-2007, 02:53 AM
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
04-21-2007, 03:38 AM
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
04-21-2007, 02:39 PM
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
04-21-2007, 04:48 PM
<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
04-21-2007, 04:53 PM
Ah yes, forgot about those. Thanks, and it is fixed now in my above post.

Twey
04-21-2007, 05:44 PM
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 innerHTMLAlthough why on Earth you'd want to when there are non-innerHTML methods available is beyond me. See the SlayerOffice article Alternatives to innerHTML (http://slayeroffice.com/articles/innerHTML_alternatives/).
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
04-21-2007, 06:14 PM
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
04-21-2007, 06:36 PM
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
04-21-2007, 06:45 PM
Stupid me... So it reads strings differently then numbers.

Veronica
04-22-2007, 01:00 AM
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?

hudz
04-29-2007, 05:34 PM
Hi..

It doesn't works on button function..i mean, when i clicked the button it change at first time..then after i clicked again, it doesn't change back to other color..How to make it like that on button function?

Thanks..

marciano
03-13-2008, 04:20 AM
Veronica, after a while I could be able to simply change td background color after checking a checkbox and returning the color after unchecking.
Thanks to you.
This is my dynamic td input . div<?=$z?> is the td id.

<input name="checkbox<?=$z?>" type="checkbox" onclick="var es = document.getElementById('div<?=$z?>').style; es.backgroundColor = (es.backgroundColor === '#cccccc' ? '#eeeeee' : '#cccccc');" value="select" />

How can I set an image background when checking the box and a bgcolor when unchecking. Or even better, how can I change the classes on each case?
Thank you