Javascript checkboxes with <asp:checkbox />

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

You don't need to use the 'type' attribute. Does the following work for you?

$(document).ready(function() {
    $('input:checkbox').....etc
});

Answer 2

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 3

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 4

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 5

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.