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

  • Facebook Open Graph META&nbsp;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...

  • Camera and Video Control with&nbsp;HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of...

  • Send Text Messages with&nbsp;PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things...

Incredible Demos

Discussion

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

    input[value='']

  2. Marcelo

    David, your blog is the best, ever!

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

    hugs

  3. thomasd

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

    I really love mootools and the way it works!

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

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

  6. 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!

Use Code Editor