Using jQuery with forms - part 3 (Selectors)

This is the third in a series of tutorials on using jQuery to manipulate forms. In this series I will be looking at parts of the jQuery API reference in detail. In this tutorial I will be looking at forms and jQuery Selectors.

Basics

element

Matches all elements with the given tag name

// Can be used to select the following elements
 
$("select")
$("label")
$("input")
$("form")
$("textarea")
$("fieldset")
$("legend")
$("select")
$("optgroup")
$("option")
$("button")

Basic Filters

:first / :last

Matches the first or last of group of elements

// Selects the first button element in my form
$("#my_form :button:first"); 

// Selects the last password element in my form
$("#my_form :password:last"); 

:not(selector)

Filters out elements from a previous group that match the given selector

// Selects all of the input fields 
// that are not hidden
$(":input:not([type='hidden'])")

:even / :odd

Matches all elements with an even or odd index

// Hide all the buttons with an even index
$("#my_form :button:even").hide(); 

// Apply the odd class to all text input elements 
// with an odd index
$("#my_form :text:odd").addClass("odd"); 

:eq(index)

Select a single element by its index

// Selects the third radio element with the name browser in 
// the form (count starts from 0) and set it to checked
$("#my_form :radio[name='rad']:eq(2)").attr('checked', 'checked');

:lt(index) / :gt(index)

Selects all elements with an index that is either less than or greater than the one specified

// Remove all radio elements with name browser 
// that have an index less than 2
$("#my_form :radio[name='browser']:lt(2)").remove();

Content Filters

:contains(text)

Selects all elements that contain the specified text

// Select all labels that have the word detail
$("#my_form label:contains('detail')");

:has(selector)

Selects parents that contain the select area

// Matches all fieldsets that contain 
// at least one radio element
$("fieldset:has(':radio')")

Forms

The following special selectors are available for forms

// Matches all input, textarea, select and button elements.
$(":input");

// Matches all input elements of type text.
$(":text");

// Matches all input elements of type password.
$(":password");

// Matches all input elements of type radio.
$(":radio");

// Matches all input elements of type checkbox.
$(":checkbox");

// Matches all input elements of type submit.
$(":submit");

// Matches all input elements of type image.
$(":image");

// Matches all input elements of type reset.
$(":reset");

// Matches all button elements and input elements of type button.
$(":button");

// Matches all input elements of type file.
$(":file");

Form Filters

:enabled / :disabled

Selects elements that either have or do not have the disabled attribute set

// Select all the textareas that are disabled and enable them
$("textarea:disabled").enable();

:checked

Matches elements that are checked (typically checkboxes, radio)

// Select the value of the checked radio element with name browser
$(":radio[name='browser']:checked").val();

:selected

Matches option that is selected (typically select element options)

// Get the text value of the select element named cheese
$("select[name='cheese'] :selected").text();

If you found this post useful, here are part 1, part 2, and part 4 of this series.