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?
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
![Being a Dev Dad]()
I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...
![Check All/None Checkboxes Using MooTools]()
There's nothing worse than having to click every checkbox in a list. Why not allow users to click one item and every checkbox becomes checked? Here's how to do just that with MooTools 1.2.
The XHTML
Note the image with the ucuc ID -- that...
![CSS Triangles]()
I was recently redesigning my website and wanted to create tooltips. Making that was easy but I also wanted my tooltips to feature the a triangular pointer. I'm a disaster when it comes to images and the prospect of needing to make an image for...
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