change color by clicking checkbox

nitindutt2005

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

Subscribe Post Reply

13124

Michael White

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

Elegie

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

by: Marc Castrechini | last post by:

I have a page that changes an <ASP:Checkbox value based on a user entered value in a textboxm using client side Javascript. After my submit is fired the value for the chkMyCB.checked does not get...

ASP.NET

Clicking Anywhere in DataGrid Row to Check CheckBox

by: .NETn00b | last post by:

Is this possible? I need to create a multi-select DataGrid, and I cannot use CheckBoxes. I want the selected rows to appear highlighted. One possible work-around that occurred to me was to...

ASP.NET

How to change disable color for Checkbox???

by: Matrixreloadedth | last post by:

How to change disable color of Checkbox??? I have a checkbox with forecolor in red but when i disable by set Enable properties to false forecolor is changed to gray color but i don't want it. how...

C# / C Sharp

Cannot change selection of radio button with Yes/No options - sometimes

by: Bob Alston | last post by:

I have an application with several forms. Most forms use radio boxes for Yes/No choices. On a few of these, once one option is selected, the user cannot change the selection without moving to...

Microsoft Access / VBA

change text color onclick, and change it back - will post to DB

by: apparker | last post by:

I'm creating a new GUI for a program and it is for a medical exam. There are so many different things to ask someone during a history it wastes too much space to make checkboxes for everything so I...

Javascript

Conditional Style change onClick

by: shroud77 | last post by:

The general gist here is that I have a cell in a table that I would like to have change background color based on whether or not the checkbox within it is selected or not. The checkbox can be...

Javascript

Clicking a row in a table affects the control

by: Steffan A. Cline | last post by:

I have a script that will cycle thru a form and add a handler to the row so that if it is clicked it will check the checkbox within the row with basically cb.checked = !cb.checked. This part works...

Javascript

C#-Form: Databound controls repeatedly get values from datasource on control change

by: morathm | last post by:

I have a windows client database management application written in C# that connects to remote web services to do all the heavy work. The thin-client app uses strong typed datasets, all maintained at...

.NET Framework

Can't change text field value in IE

by: dugald.morrow | last post by:

I have some javascript that updates the text in a text field after certain actions take place such as clicking a checkbox. The javascript works fine in Safari and Firefox, but in IE, the text in...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

change color by clicking checkbox

Similar topics