By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,200 Members | 1,755 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,200 IT Pros & Developers. It's quick & easy.

change color by clicking checkbox

P: n/a
Hi I have a html file as below.
================================================== ==================
<html>

<head>
<td style="background-color:rgb(170, 157, 244);">
<table border="0" cellpadding="5" cellspacing="2" width="95%">

<tr><td style="background-color:yellow" width="100%">
<table><tr style="font-size: 95%;"><td><input
type="checkbox" name="" value="new" onclick="ShowDate()" /></
td><td>sub<br/>math</td></tr></table>
</td></tr>
<tr style="font-size: 80%;"><td style="background-
color:rgb(238, 236, 253);" width="100%">
<table><tr style="font-size: 95%;"><td><input
type="checkbox" name="" value="new" /></td><td>sub<br/>english</td></
tr></table>
</td></tr>
<tr style="font-size: 80%;"><td style="background-
color:rgb(238, 236, 253);" width="100%">
<table><tr style="font-size: 95%;"><td><input
type="checkbox" name="" value="new" /></td><td>sub<br/>hindi</td></
tr></table>
</td></tr>
<tr style="font-size: 80%;"><td style="background-
color:rgb(238, 236, 253);" width="100%">
<table><tr style="font-size: 95%;"><td><input
type="checkbox" name="" value="new" /></td><td>sub<br/>science</td></
tr></table>
</td></tr>
<tr style="font-size: 80%;"><td style="background-
color:rgb(238, 236, 253);" width="100%">
<table><tr style="font-size: 95%;"><td><input
type="checkbox" name="" value="new" /></td><td>sub<br/>geography</td></
tr></table>
</td></tr>
<SCRIPT language="Javascript">
function ShowDate()
{


}
</SCRIPT>


</body>
</html>
================================================== ==========
I want the color to be changed to blue or anything once I click any
checkbox.

How can I do that using java script.

Apr 12 '07 #1
Share this Question
Share on Google+
2 Replies


P: n/a
ni***********@gmail.com wrote:
Hi I have a html file as below.
================================================== ==================
<html>

<head>
<td style="background-color:rgb(170, 157, 244);">
<table border="0" cellpadding="5" cellspacing="2" width="95%">

<tr><td style="background-color:yellow" width="100%">
<table><tr style="font-size: 95%;"><td><input
type="checkbox" name="" value="new" onclick="ShowDate()" /></
td><td>sub<br/>math</td></tr></table>
</td></tr>
<tr style="font-size: 80%;"><td style="background-
color:rgb(238, 236, 253);" width="100%">
<table><tr style="font-size: 95%;"><td><input
type="checkbox" name="" value="new" /></td><td>sub<br/>english</td></
tr></table>
</td></tr>
<tr style="font-size: 80%;"><td style="background-
color:rgb(238, 236, 253);" width="100%">
<table><tr style="font-size: 95%;"><td><input
type="checkbox" name="" value="new" /></td><td>sub<br/>hindi</td></
tr></table>
</td></tr>
<tr style="font-size: 80%;"><td style="background-
color:rgb(238, 236, 253);" width="100%">
<table><tr style="font-size: 95%;"><td><input
type="checkbox" name="" value="new" /></td><td>sub<br/>science</td></
tr></table>
</td></tr>
<tr style="font-size: 80%;"><td style="background-
color:rgb(238, 236, 253);" width="100%">
<table><tr style="font-size: 95%;"><td><input
type="checkbox" name="" value="new" /></td><td>sub<br/>geography</td></
tr></table>
</td></tr>
<SCRIPT language="Javascript">
function ShowDate()
{


}
</SCRIPT>


</body>
</html>
================================================== ==========
I want the color to be changed to blue or anything once I click any
checkbox.

How can I do that using java script.
The color of what?
Mick
Apr 12 '07 #2

P: n/a
ni***********@gmail.com wrote:

Hi,
I want the color to be changed to blue or anything once I click any
checkbox.
To do so, you have to find the relevant element whose background color
you want to change, and then update its appropriate style property.

The first part, retrieving the target element, depends on the HTML
structure; it is generally easier to start from the checkbox itself
(passing a reference with the "this" keyword, which will refer to the
control), then navigate to the target element. However, this only works
if your structure is clean and consistent, which is absolutely not the
case of the terrible thing you have posted :)

Therefore, start with correcting your HTML structure, make it as simple
as possible (if you're using WYSIWYG editors, drop them), and have it
validated; it is essential that you master HTML before writing
client-side javascript.

<URL:http://www.w3.org/TR/html401/>
<URL:http://validator.w3.org/>

Then, once your HTML structure has been improved, read about the
document object model, especially the parentNode property.

<URL:http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/>

The following example should help you writing a good script.

---
<form action="#">
<table>
<tbody>
<tr>
<td>
<input type="checkbox" onclick="foo(this)" value="0">
</td>
<td>
Math
</td>
</tr>
</tbody>
</table>
</form>

<script type="text/javascript">
function foo(cb) {
cb.parentNode.nextSibling.style.backgroundColor =
cb.checked ? "blue" : "" ;
}
</script>
---

Regards,
Elegie.
Apr 12 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.