change color by clicking checkbox

nitindutt2005 · Apr 12, 2007

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.

Elegie · Apr 12, 2007

(e-mail address removed) 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>

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Javascript DOM	1	Mar 29, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Can anyone please help? HTML - two tables applying different styles	4	Dec 1, 2020
Sort by number of characters	1	Nov 2, 2023
Nested Loop Insert Page Break	1	Nov 5, 2021
Help needed with thank you message	5	Sep 11, 2021
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023

change color by clicking checkbox

nitindutt2005

Elegie

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads