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?

Treehouse Learning

Recent Features

  • Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

  • Animated AJAX Record Deletion Using jQuery

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript. The PHP - Content & Header The following snippet goes at the...

  • iPhone Click Effect Using MooTools or jQuery

    One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement 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!