4

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.

Improve this question

2 Answers 2

Reset to default
3

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!

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

1 Comment

@PhD I've added a second update to which I think I better understand what you're looking for.
0

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";
 });
}
Improve this answer

9 Comments

An example please? Pseudo code would be fine too. How do I listen for class assignment??
Pseudo code? if forall(form checkboxes) has CSS class '.checked' { element.checked(true); }. I believe that's what Travis J is saying.
@jmbertucci - I got that much :) I'm wondering how to listen for class toggle? Custom events?
Ah, are you familiar with jQuery? I'll update my answer quick. It wouldn't be hard.
@PhD - Actually, while beginning to write a "simple" example I realized that although you can attach an event to any class on a page, it is not that easy to listen for a class toggle. I am not sure if you would like my hack for doing that as it may slow down the page.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.