Treehouse

Create a Custom “:checked” Pseudo Selector for MooTools 1.2

By on  

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?

ydkjs-2.png

Recent Features

  • Introducing MooTools&nbsp;Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • 9 Mind-Blowing WebGL&nbsp;Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • Multiple File Upload&nbsp;Input

    More often than not, I find myself wanting to upload more than one file at a time.  Having to use multiple "file" INPUT elements is annoying, slow, and inefficient.  And if I hate them, I can't imagine how annoyed my users would be.  Luckily Safari, Chrome,...

  • WebKit-Specific Style:&nbsp;-webkit-appearance

    I was recently scoping out the horrid source code of the Google homepage when I noticed the "Google Search" and "I'm Feeling Lucky" buttons had a style definition I hadn't seen before:  -webkit-appearance.  The value assigned to the style was "push-button."  They are buttons so that...

Discussion

  1. thomasd

    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.

  2. @thomasd: I like your “novalue” pseudo selector. As for your question, try this:

    input[value='']

  3. Marcelo

    David, your blog is the best, ever!

    I love your articles, and I always use your tips.

    hugs

  4. thomasd

    @david: input[value=''] doesn’t work.
    But the pseudo selector works quite well.

    I really love mootools and the way it works!

  5. Just a note though, :checked is already in Mootools Selectors source. http://tr.im/1n83

  6. @Lim Chee Aun: Cool! It’s not in 1.2 so this must be new.

  7. Jon Bomgardner

    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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!