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?
![Chris Coyier’s Favorite CodePen Demos]()
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![Implementing Basic and Fancy Show/Hide in MooTools 1.2]()
One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the "Class" class' implement method. Using the implement method, you can add your own methods to...
![Smooth Scrolling with MooTools Fx.SmoothScroll]()
I get quite a few support requests for my previous MooTools SmoothScroll article and the issue usually boils down to the fact that SmoothScroll has become Fx.SmoothScroll. Here's a simple usage of Fx.SmoothScroll.
The HTML
The only HTML requirement for Fx.SmoothScroll is that all named...
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