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.

If you put an <asp:Checkbox and an html checkbox side by side and then do : $('input:checkbox').length - is that equal to 2 ? — sirrocco
– sirrocco, Commented Aug 21, 2009 at 14:31
Well there you go, there's a problem in the plugin. Try to write the same structure in html as asp.net generates it. See if you see different behavior. Also install firebug and see if any errors are generated. — sirrocco
– sirrocco, Commented Aug 21, 2009 at 15:06
Hmm.. the javascript in the link is not a jquery plugin. What's the .checkbox() method suppose to do ? — sirrocco
– sirrocco, Commented Aug 21, 2009 at 15:23
Oh, I'm sorry, I might have a skewed perception of the term plugin! — Kablam
– Kablam, Commented Aug 21, 2009 at 15:26

rtperson · Accepted Answer · 2009-08-21 14:39:33Z

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.

answered Aug 21, 2009 at 14:39

rtperson

11.7k4 gold badges32 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sirrocco Over a year ago

that has very small chances o working as asp.net will probably generate the id like ctl00_..._mycheck .

Kablam Over a year ago

sirrocco is right. Also, I have an id defined for the processing of the form already and when i use that in the script, still no style :(

rtperson Over a year ago

Gah. I hate technologies that munge the ID. JSF does the same thing. Good luck.

Kablam · Accepted Answer · 2009-08-26 09:24:34Z

1

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.

edited Aug 26, 2009 at 9:24

answered Aug 21, 2009 at 15:25

Kablam

2,6295 gold badges29 silver badges47 bronze badges

Comments

Kablam · Accepted Answer · 2009-09-01 12:34:26Z

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;
    }
}

Jonathan Williams · Accepted Answer · 2010-04-01 10:04:49Z

1

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.

answered Apr 1, 2010 at 10:04

Jonathan Williams

2,0751 gold badge19 silver badges23 bronze badges

1 Comment

Jonathan Henson Over a year ago

That, sir, is the cause of many problems. I am growing to avoid ASP controls unless it is absolutely necessary to do otherwise. I just ended up using an <input type="checkbox" runat="server" />

Mutation Person · Accepted Answer · 2009-08-21 14:32:18Z

0

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

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

edited Aug 21, 2009 at 14:32

answered Aug 21, 2009 at 14:12

Mutation Person

30.6k18 gold badges102 silver badges166 bronze badges

3 Comments

Kablam Over a year ago

No, this gives the same result. When I add a "regular" html checkbox, that one does get the new style, yet the asp:checkbox doesn't.

Mutation Person Over a year ago

That's really odd. If you compare the rendered source (view source in your borwser, is there any difference in rendered markup)

Kablam Over a year ago

There is, actually... The asp:Checkbox is wrapped in a span with class styled, due to the javascript. The html checkbox isn't... you're onto something. Thanks!

Collectives™ on Stack Overflow

Javascript checkboxes with <asp:checkbox />

5 Answers 5

3 Comments

Comments

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related