Javascript checkboxes with <asp:checkbox /> - asp.net

Question

The Javascript checkbox script (by ryanfait) worked beautifully when I used it at first. Then I needed to alter the form I made so that asp.net could process the form, but now the checkboxes are default.
Is there a way to alter the script to make it work on the asp:checkbox?
I call the function like so:
$(document).ready(function() {
$('input[type=checkbox]').checkbox();
});
And here is the actual javascript.
I have two different types of checkboxes on my page at the moment, one <asp:Checkbox ... /> and one <input type="checkbox" ... />. The second one gets styled, the asp checkbox doesn't...
I haven't contacted Ryan Fait yet, as I hoped this was a common "bug".
EDIT:
The way the script works is, it finds all elements with class="styled", hides it and then puts a span next to the element. Somehow in my sourcecode, for the asp:checkbox this happens too early I think. Look:
<input type="checkbox" class="styled" /><span class="styled"><input id="ctl00_contentPlaceHolderRightColumn_newsletter" type="checkbox" name="ctl00$contentPlaceHolderRightColumn$newsletter" /></span>
The span is there, visible and all, which it should not (I believe, as the first checkbox shows up in the style I want it to be, the second doesn't).
So far, I found a part of the problem. The javascript cannot change the asp checkbox somehow, but when I manually add the span the javascript is supposed to create, the checkbox doesn't work as a checkbox anymore. I added some details in my answer below.

Answer 1

Set an ID on your checkbox and then reference it by that ID, like so:
<asp:checkbox id="mycheck" />
Then reference it like this:
$('#mycheck').checkbox();
If that doesn't work, do what many, many web developers before you have done: download Firefox, install Firebug, and check your selector logic in the console. I find it's always easier to develop in Firefox, even when my target platform is IE.

Answer 2

I found part of the answer.
When I add the span the plugin creates manually like so:
<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ... /></span>
I do get the nicely looking checkbox UNDERNEATH the actual checkbox!
However, the styled box is not interactive. It doesn't change when I click it or hover over it nor does it register the click. It's basically not a checkbox anymore, just a goodlooking square. The actual asp checkbox that shows up does register clicks, but it's the ugly standard one.
<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ID="anId" runat="server" style="visibility: hidden;" /></span>
The visibility: hidden makes the "real" checkbox dissappear and leaves the goodlooking yet broken one.

Answer 3

Got it.
Forget about the RyanFait Solution, this one works on ALL checkboxes. :D
var boxes;
var imgCheck = 'Images/checkbox-aangevinkt.png';
var imgUncheck = 'Images/checkbox.png';
function replaceChecks(){
boxes = document.getElementsByTagName('input');
for(var i=0; i < boxes.length; i++) {
if(boxes[i].getAttribute('type') == 'checkbox') {
var img = document.createElement('img');
if(boxes[i].checked) {
img.src = imgCheck;
} else {
img.src = imgUncheck;
}
img.id = 'checkImage'+i;
img.onclick = new Function('checkChange('+i+')');
boxes[i].parentNode.insertBefore(img, boxes[i]);
boxes[i].style.display='none';
}
}
}
function checkChange(i) {
if(boxes[i].checked) {
boxes[i].checked = '';
document.getElementById('checkImage'+i).src=imgUncheck;
} else {
boxes[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgCheck;
}
}

Answer 4

I think that your problem could be caused by the fact that asp:CheckBox controls are automatically wrapped in a span tag by default, and setting the CssClass attribute on the asp:CheckBox control actually adds the class to the span (not the input) tag.
You can set the class on the input tag using the 'InputAttributes' as follows:
chkMyCheckbox.InputAttributes.Add("class","styled");
...
<asp:checkbox id="chkMyCheckbox" />
This should then allow you to target the checkbox with your existing JavaScript.

Answer 5

You don't need to use the 'type' attribute. Does the following work for you?
$(document).ready(function() {
$('input:checkbox').....etc
});