How to change the checkbox background using JavaScript

I am having three check boxes on my form. I would like to change the background color of the chec开发者_开发技巧k boxes when checked. Is it possible to write a single script for all the check boxes on my form?

---

Changing background colour of checkboxes isn't consistent across browsers.

Take a look at this link for an indication of how they'll look.

If you want to change the background colour and have it work consistently, you may well be better off looking at a JavaScript forms extension.

This link provides a few: 25+ jQuery Plugins that enhance and beautify HTML form elements and Google will provide many more.

---

EDIT: If you do want to work around it using jQuery, you can use wrap() and unwrap() to add a coloured span around the checkbox. This won't change the background of the checkbox itself, but it will provide some visual feedback in a reliable way.

$('input[type=checkbox]').click(function() {
    $(this).unwrap().filter(":checked").wrap("<span class='selected'>");
});

WORKING DEMO

---

ASP.NET markup:

<asp:CheckBox runat="server" ID="checkBox" />

Using jQuery:

$('#checkBox') // select by id
    .css('backgroundColor', value); // set value

---

Rather than using CSS/Javascript to change the background of the checkbox, which will have issues cross-browser (as @Town has pointed out) I would recommend using the ASP.NET Ajax Control Toolkit's "Toggle Button" control. Then use an image of a checked checkbox (print screen or designed if you wish), and the same image unchecked.

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ToggleButton/ToggleButton.aspx

This control uses the CheckBox control so you would have all the usual functionalities of an ASP.NET CheckBox too

---

This is exactly the kind of thing jQuery is designed to do.