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?
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![fetch API]()
One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for. We've done well to create elegant APIs around XHR but we know we can do better. Our effort to...
![CSS calc]()
CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought...
![Creating the Treehouse Frog Animation]()
Before we start, I want to say thank you to David for giving me this awesome opportunity to share this experience with you guys and say that I'm really flattered. I think that CSS animations are really great. When I first learned how CSS...
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