How to visualize checked flags using only CSS?

Question

It can be very noobish and a little awkward, but am I struggling to figure out how to make checkboxes 'checked' using CSS?

The fact is that if the parent has the setup class (for example), I would like all the flags to have setup as the parent. I assume this is not feasible in pure CSS, right? I don't mind using JS, but I'm very curious if I can toggle the state of the checkboxes along with their parents (by switching the class).

Here's a fiddle to play with.

Answer 1

A checkmark checked is not a style. This is a condition. CSS cannot control states. You can fake something using background images of check marks and lists and what not, but that’s not exactly what you are talking about.

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

EDIT

Here is the script for this pseduo code. The fact is that this is pretty pointless.

This means that you need to add the CSS class to the element on the server that you want jQuery to "validate". If you do this, you can add the attribute of the actual item while you are on it.

http://jsfiddle.net/HnEgT/

So this makes me wonder if I just don’t understand what you are talking about. I'm starting to think that there is a client side script that changes state, and you want to control this?

EDIT 2

With some comments reflected and some quick digs, if you want the JavaScript solution to check the checkbox, if there is some other JavaScript plugin that can change the attribute value (something that does not have an event trigger), the only solution would be to make a simple a timeout cycle that constantly checks a group of elements for a given class and updates them.

All you have to do is set how often you want this timeout to work. In a sense, this is a form of "long polling", but actually does not go to the server to update the data. This is all the client side. Which, I suppose, is what is called a "timeout". = P

Here is the tutorial I found on this subject:

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

I will see if I can crack a jQuery sample.

UPDATE

Here's the jsfiddle timeout listener to check if CSS classes are added to this checkbox and set their status to “ticked”.

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

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

I hope this helps!

Answer 2

Impossible in pure css.

However, you may have a jQuery event that is bound to all elements of the class, thereby causing a check or uncheck based on class assignments.

Perhaps so:

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