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

Upcoming Events

Recent Features

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • MooTools Image Preloading with Progress Bar

    The idea of image preloading has been around since the dawn of the internet. When we didn't have all the fancy stuff we use now, we were forced to use ugly mouseover images to show dynamism. I don't think you were declared an official...

  • Introducing MooTools 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...

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

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...