Create a Custom “:checked” Pseudo Selector for MooTools 1.2
A few weeks back, I showed you how to create a custom ":selected" pseudo selector for use in MooTools. It was just a small snippet but I've found it incredibly useful, as has been the ":checked" pseudo selector I've been using.
The XHTML
<input type="checkbox" name="mycheckbox" value="1" checked="checked" />
<input type="radio" name="mycheckbox" value="1" checked />
Above are examples of checked elements.
The MooTools JavaScript
Selectors.Pseudo.checked = function(){
return ('input' == this.get('tag') && ('radio' == this.get('type') || 'checkbox' == this.get('type')) && this.checked);
};
Of course, you could always try to retrieve checked elements using "input[checked=checked]," but that code is case-sensitive and may not always return checked elements. What other pseudo selectors may be useful for MooTools?
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![JavaScript Speech Recognition]()
Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon's Echo, then my new Apple TV, and so on. Speech recognition is so useful for not just us tech superstars but for people who either want to work "hands...
![MooTools Gone Wild: Element Flashing]()
If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention...
One time I needed an empty value selector for input elements:
Selectors.Pseudo.novalue = function(){ return (this.tagName.toLowerCase() == 'input' && this.value === ''); };Or is there a way to test an empty attribute with CSS-Selectors, something like “input[value=]”? That didn’t worked in my case.
@thomasd: I like your “novalue” pseudo selector. As for your question, try this:
input[value=”]
David, your blog is the best, ever!
I love your articles, and I always use your tips.
hugs
@david: input[value=”] doesn’t work.
But the pseudo selector works quite well.
I really love mootools and the way it works!
Just a note though, :checked is already in Mootools Selectors source. http://tr.im/1n83
@Lim Chee Aun: Cool! It’s not in 1.2 so this must be new.
I know this entry is a tad old but I was wondering if this was tested in IE8? I’m using it in a project and in the one place I use this selector IE8 has fits. Problem is I can’t see anything there that would cause it….
Your thoughts??
Jon