O'Reilly

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?

Track.js Error Reporting

Recent Features

  • Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • Send Text Messages with 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 too.  But I still don't get...

Incredible Demos

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!

Recently on David Walsh Blog

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...