CODEWITHSUNDEEP
csscheckbox
PhD
PhD

Reputation: 11334

How to render checked checkboxes using CSS alone?

This is may be very noobish and a bit embarrassing but I am struggling to figure out how to make checkboxes 'checked' using CSS?

The case is that if a parent has a class setup (for example) I'd like to have all the checkboxes having setup as parent to be checked. I'm guessing this is not doable in pure CSS, correct? I don't mind using JS but am just very curious if I could toggle the state of the checkboxes along with that of their parent (by toggling the class).

Here's a fiddle to play around with.

Upvotes: 4

Views: 3733

Answers (2)

jmbertucci
jmbertucci

Reputation: 8234

A checkbox being "checked" is not a style. It's a state. CSS cannot control states. You can fake something by using background images of check marks and lists and what not, but that's not really what you're talking about.

The only way to change the state of a checkbox is serverside in the HTML or with Javascript.

EDIT

Here's a fiddle of that pseduo code. The things is, it's rather pointless.

It means you need to adding a CSS class to an element on the server that you want to jQuery to "check". If you're doing that, you might as well add the actually element attribute while you're at it.

http://jsfiddle.net/HnEgT/

So, it makes me wonder if I'm just miss-understanding what you're talking about. I'm starting to think that there's a client side script changing states and you're looking to monitor for that?

EDIT 2

Upon some reflection of the comments and some quick digging, if you want a JavaScript solution to checking a checkbox if there's some other JavaScript plugin that might change the an attribute value (something that doesn't have an event trigger), the only solution would be to do a simple "timeout" loop that continuously checks a group of elements for a given class and updates them.

All you'd have to do then is set how often you want this timeout to fire. In a sense, it's a form of "long polling" but without actually going out to the server for data updates. It's all client side. Which, I suppose, is what "timeout" is called. =P

Here's a tutorial I found on the subject:

http://darcyclarke.me/development/detect-attribute-changes-with-jquery/

I'll see if I can whip up a jQuery sample.

UPDATE

Here's a jsfiddle of a timeout listener to check for CSS classes being added to a checkbox and setting their state to "checked".

http://jsfiddle.net/HnEgT/5/

I added a second function to randomly add a "checked" class to a checkbox ever couple of seconds.

I hope that helps!

Upvotes: 3

Travis J
Travis J

Reputation: 82287

Not possible in pure css.

However, you could have a jQuery event which is attached to all elements of a class, thereby triggering the check or uncheck based on class assignments.

Perhaps like this:

function toggleCheck(className){
 $("."+className).each( function() {
  $(this).toggleClass("checkedOn");
 });
 $(".checkedOn").each( function() {
  $(this).checked = "checked";
 });
}

Upvotes: 0

Related Questions