Link to home
Create AccountLog in
Avatar of kgp43
kgp43Flag for Denmark

asked on

Set background color (onClick), but remove when deselected (checkbox)?

Hi,

I have the following, which change the background color when a checkbox is checked, but how do I remove the background color when the checkbox is de-selected?

<label for="chk_<?php echo $file['id']; ?>">
		
	<input type="checkbox" class="cbox" id="chk_<?php echo $file['id']; ?>" name="checked[]" value="<?php echo $file['id']; ?>" />
			
	<div class="thumb <?php if($file['archived'] == 1) echo 'yellow'; ?>" onClick="style.backgroundColor='#84DFC1';">
				......
	</div>
			
</label>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of kgp43
kgp43
Flag of Denmark image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
With JS:  <input type="checkbox" onclick="if (this.checked) { this.style.backgroundColor='#84DFC1'; } else { this.style.backgroundColor='#FF0000'; }" .....>
Avatar of kgp43

ASKER

That might be a better solution Sar1973.
Seems that CSS3 method above does not work in IE (at least not the version I have at work).

Will give it a test when I get home later today.
Avatar of kgp43

ASKER

Cant get that to work Sar1973.

<div class="list-item" id="<?php echo $file['id']; ?>">
<label for="chk_<?php echo $file['id']; ?>">
		
	<input type="checkbox" class="cbox" id="chk_<?php echo $file['id']; ?>" name="selectfile[]" value="<?php echo $file['id']; ?>"  />
	
	<div class="thumb">
		<img src="<?php echo $thumb_path; ?>" alt="<?php echo $file['title']; ?>" width="100" height="100">
		<span class="attr"><?php echo $file['imgsize']; ?></span>
		<span class="size"><?php echo FormatFileSize($file['filesize']); ?></span>
	</div>
</label>
</div>

Open in new window


The div "thumb" change color when the frame (or the checkbox itself) is clicked, at least using this CSS, but it does not work in all browers.

.list-item input[type=checkbox]:checked + .thumb {
	color: white;
	background: #86b3c1;
}

Open in new window


Any suggestions how to do this in JS?
I don't know php, but could be in "<input type="checkbox" ....":
<?php if ($checked)  { echo $background_color = "Green"; } else { echo $background_color = "Red"; } ?> See http://code.activestate.com/recipes/576679-php-background-colour-changer/
Avatar of kgp43

ASKER

The other suggestion did not work, only my own CSS3 method - still want to use JS, but no solution yet.