Cell background change on form checkbox change

you can not change checkbox background color.

instead you can use this trick:

http://jsfiddle.net/QQhtP/

This is done using jQuery.

What about just the table cell background as the example site I posted initially (only when there is a change over tick or untick)?

I am unable to see checkboxes on given link by you.

No matter where your checkboxes are.
if suppose you added checkboxes in table cell (<TD>)

then automatically, parent of checkbox means (td) will get updated with assigned background color.

hope this helps you.

This is my script:

<SCRIPT language="javascript" type="text/javascript">
function swapcol(item){
 if(document.getElementById(item).checked){
  document.getElementById(item+'bg').style.background='#00FFFF'
 }
 else{
  document.getElementById(item+'bg').style.background='#00FFFF'
 }
}
</SCRIPT>
...................
<td><input name="Chk2" id="Chk2" onclick="swapcol('Chk2')" type="checkbox" value="1"/></td>

Select allOpen in new window

Say if (via a PHP call to a MySQL value) a value = 1 and this inserts

checked="checked"

Select allOpen in new window

to the above input checkbox option, then if I untick it I want that value to have the cell change colour (which it does in the table). That way it is visible that the value has been changed.
If say another is unticked from the PHP call, then I want it to be coloured if it is ticked.

So far the scripts only change for either a ticked or unticked box, but not as a changed value. What I have done for now is set the changed value to the same colour, however if you revert the change back to the default it does not revert the colour change.
I hope this is clearer.

I only ever code javascript using jQuery these days. If you are using jQuery, then you can do what you need with something like this:

$('input:checkbox').change(function(){
    $(this).parent('td').toggleClass('changed');
})

Select allOpen in new window

It will add a class of 'changed' to the TD when you change the value of the checkbox. It will then remove it again when reverting back. Style the class accordingly.

Here's a working fiddle to play with: http://jsfiddle.net/ChrisStanyon/bDLBA/

greetings  kiwistag, , you have not used a correct way to have this work, the problem is that you have the same COLOR for Checked AND UnChecked -
if(document.getElementById(item).checked){
  document.getElementById(item+'bg').style.background='#00FFFF';
 } else {
  document.getElementById(item+'bg').style.background='#00FFFF'; // SAME COLOR
 }


this is untested code But you may can see what I try and do  -

function swapcol(item){
if (document.getElementById(item+'bg').style.background == '#00FFFF'){
document.getElementById(item+'bg').style.background='#FFFFFF';
} else {
document.getElementById(item+'bg').style.background='#00FFFF';
}

}

Select allOpen in new window

IF you are Only Interested in changing the DIV background color, then IF TEST for that Color, and change to Another Color, No matter what the start color may be, this code assumes that the CheckBox Checked and Div colors are Correct on page load.

ask questions if you need more info

I set the color to the same in my stated code so that at least either way a checkbox is selected it will highlight that record has been (attempted to be) changed. This isn't exactly what I want but is a start.

If you're happy to use jQuery, I've already given you the answer to this!

Thanks. I tried it but without initial success. I hope to get back onto this site this week.