Hi people,

 

I know incredibly little about JavaScript and usually end up hacking together some code to get what I need which often leads me into a brick wall...like this one:

 

I want to change an elements CSS background property based on a checkbox being checked or not.

 

I'm currently using this:

 

<input type="checkbox" name="highlight" value="TRUE" onClick="output('highlight')"/>

<span id="highlight">Some text</span>

 

function output(ID)
{
   var text= document.getElementById(ID);
   text.style.background = '#C39';
}

 

This works in that when the checkbox is clicked the 'Some text' is given a background colour of '#C39'.

 

What I want is it to run the event on change (is there such thing) then check the existing state and change the background colour appropriately.

 

Can anyone help?

Okay I've now got this:

 

function output(ID)
{
var text = document.getElementById(ID);

var cur = text.style.background; // current value

if (cur == '#C39') { // don't think this is working
	text.style.background = 'none';
}
else {
	text.style.background = '#C39';
}
}

 

Can anyone see anything wrong with it?

Anyone?

Got a link? What does the console say?

 

What about..

 

 if (cur == '#C39') { // don't think this is working
               text.style.background = 'transparent';
       }

 

I'm not that good with real JavaScript though :B

Got a link? What does the console say?

 

What about..

 

 if (cur == '#C39') { // don't think this is working
               text.style.background = 'transparent';
       }

 

I'm not that good with real JavaScript though :B

 

Yeah just uploaded an example - http://www.richardscarrott.co.uk/highlight.html

 

As you can see it works one way but won't change back!

 

Tried using transparent instead but no joy!

 

As I mentioned before I'm not great with JS either, I haven't had the time to study it.

 

I swear this is a really easy thing to do, I just need someone who knows the basics!

Hi,

 

Javascript isn't my area also, but also have to study that . Well I think the logic is like this, we use a onclick to change the background color, and another event (onchange) too change de background color to transparent. If I'm not correct, please say it, I'm a beginner in programming.

 

Best Regards.

I could tell you how to do this in jQuery though in about 30 seconds flat lol :B

 

So basically you wanna know if it's checked or not? if so do something, if not do something else?

Hi,

 

Javascript isn't my area also, but also have to study that . Well I think the logic is like this, we use a onclick to change the background color, and another event (onchange) too change de background color to transparent. If I'm not correct, please say it, I'm a beginner in programming.

 

Best Regards.

 

mmm I don't think you've quite got it there, it makes more sense to use the same event to change it to #C39 and back to transparent or none, whether it's onclick or onchange I don't know!

 

I could tell you how to do this in jQuery though in about 30 seconds flat lol :B

 

So basically you wanna know if it's checked or not? if so do something, if not do something else?

 

Yeah here's some pseudo, the logic is soooooo simple it's just getting the syntax!

if (Checked) {
TextbackgroundColor == #C39;
}
else {
TextbackgroundColor == none;
}

 

Trouble is it doesn't seem worth using JQuery for such little functionality, although if I get to the end of my tether, which I'm close to, I might end up taking you up on the JQuery option!

Hi,

 

Ok, I'm going to code a little and try to help you .

 

Regards

Can you pass your code, the link is dead :S

 

Regards

aha, i wouldn't recommend jQuery for something this trivial. I found a js solution, but the file was almost as big as jquery itself :/

 

You can use something like this to check if the checkbox is checked or unchecked, would that work?

 

 

if(highlight.checked == true) { text.style.background = 'none'; }

if(highlight.checked == false) { text.style.background = '#C39'; }

Can you pass your code, the link is dead :S

 

Regards

 

Yeah my hosting company is utter bull! You can either try refreshing it or use the code here, any help would be much appreciated!

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Template</title>

<style>

span#highlight {
background-color:none;
}

</style>

<script type="text/javascript">

function output(ID)
{
var text = document.getElementById(ID);

if (text.style.backgroundColor != "#C39") {
	text.style.backgroundColor = '#C39';
}
else {
	text.style.backgroundColor = 'transparent';
}
}

</script>

</head>

<body>

<input type="checkbox" name="highlight" value="TRUE" onClick="output('highlight')"/>

<span id="highlight">Some Text</span>


</body>
</html>

 

 

aha, i wouldn't recommend jQuery for something this trivial. I found a js solution, but the file was almost as big as jquery itself :/

 

You can use something like this to check if the checkbox is checked or unchecked, would that work?

 

 

if(highlight.checked == true) { text.style.background = 'none'; }

if(highlight.checked == false) { text.style.background = '#C39'; }

 

lol it should be so simple! I'm just giving those lines a go now.

i nabbed them from here

 

http://form-checkbox-validation.4wsearch.com/demo-scripts.htm

 

So they should work, if they don't just check the source of that page and modify to suit

i nabbed them from here

 

http://form-checkbox-validation.4wsearch.com/demo-scripts.htm

 

So they should work, if they don't just check the source of that page and modify to suit

 

FINALLY! cheers for your help Bocaj, that did the trick! Check it here

 

Now I just need to be able to change the ID to a class so it will highlight multiple <spans>...mmm

Hi,

 

I was doing that if the tag name.

document.getElementByName('highlight')

Ofcourse you can do it with de class .

 

Nice job, and it was so simple xP.

 

Regards

Hi,

 

I was doing that if the tag name.

document.getElementByName('highlight')

Ofcourse you can do it with de class .

 

Nice job, and it was so simple xP.

 

Regards

 

That doesn't seem to work for me? I've managed to get the following working:

 

function highlight2(myform) {

var text = document.getElementsByTagName('span');

if(myform.mycheckbox.checked == true) {

	for (i = 0; i < text.length; i++) {
		text[i].style.backgroundColor = '#C39';
	}

}

if(myform.mycheckbox.checked == false) {

	for (i = 0; i < text.length; i++) {
		text[i].style.backgroundColor = 'transparent';
	}
}
}

 

but that is selecting every <span> element, I need every span element with a specific class i.e. <span class="highlight">

Okay if anyone actually wants to know how this can be done here's the code:

 

function highlight3(myform, Class) {

//Create Array of All HTML Tags
   var allHTMLTags = document.getElementsByTagName("*");

   //Loop through all tags using a for loop
   for (i=0; i < allHTMLTags.length; i++) {

	//Get all tags with the specified class name.
	if (allHTMLTags[i].className == Class) {

		if(myform.mycheckbox.checked == true) {
			allHTMLTags[i].style.backgroundColor = '#C39';
		}
		else {
			allHTMLTags[i].style.backgroundColor = 'transparent';
		}
	}
}
}

 

<form name="myform">
<input type="checkbox" name="mycheckbox" value="valeur" onClick="highlight3(this.form, 'highlight')"/>
</form>

<span class="highlight"> Highlight this text by checking the box </span>
this text will be left un-highlighted
<span class="highlight"> but this will be highlighted </span>

Hi,

 

Nice shot dude. Tks for the reference .

 

Nice work, keap on going with that .

 

Regards

For a good writeup on accessing form elements and values: http://www.quirksmode.org/js/forms.html#scheckbox

Nice reference also