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

Written by David Walsh on November 26, 2008 · 7 Comments

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?

Comments

  1. 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. David, your blog is the best, ever!

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

    hugs

  4. @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 August 8, 2009

    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

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Check for Function and Class Existence Using PHP
Newer
What I'm Thankful For: 2008 Edition