Change cell color on click of a checkbox javascript

[wooshman]

Hi All, hopefully you can help.

I have:

<table> <tr> <td width="120" height="120" bgcolor="#8fd656" align="center" onClick="if (this.bgColor=='#8fd656'){this.bgColor='#DDDDDD'} else {this.bgColor='#8fd656'};">
    Check Box <input type="checkbox" name="checkbox[]" id="checkbox[]" value="Checked"> </td> </tr> </table>

Now this works with changing the background color when I either click the cell itself or check / uncheck the box, but I ideally need it so that when the checkbox is ticked the background color of the cell changes and not by clicking the cell.

checkbox must be an array as there are up to 20 cells each with a checkbox dynamically built and these are posted.

Everything works as it should except for changing the color of the cell ONLY when the tick box is checked or unchecked. I cannot see a way of saying "when tickbox is checked, make td background color: #FFF"

Any help will be great.
Cheers
Ben

[hericles]

Move your code into the click or change event of the checkbox.
You'll want to refer to the parent of the checkbox to make sure you are targeting the correct td.

$("td input['type=checkbox']").change(function() {
     if($(this).prop('checked')) {
         $(this).parent().css('background-color', '#somecolour');
     }
});

that should work, I haven't tested it myself but at the least, it points you in the right direction.

[wooshman]

Many thanks hericles.

I have not touched jquery other than pre built sliders etc so had a quick play but couldn't use it. But with the this.parent helped me find a the equivalent using javascript. As you said I moved the onclick to the checkbox and then changed the parent background colour from there.

<table>
<tr>
<td width="120" height="120" bgcolor="#8fd656" align="center">
Check Box <input type="checkbox" name="checkbox[]" id="checkbox[]" value="Checked" onClick="if (parentNode.bgColor=='#8fd656'){parentNode.bgColor='#DDDDDD'} else {parentNode.bgColor='#8fd656'};">
</td>
</tr>
</table>

Out of interest and for insight in jquery, how would I have used your jquery to do the same please? If you don't mind you will even need to show the <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> parts as I am a complete noob with it.

Thanks in advance and thanks again for your solution leading to my resolution.