This is the last post of the series explaining selection of DOM elements with jQuery. We started with basic and hierarchal selectors. Then, we read about filters in posts covering filters in two parts – Part 1 and Part 2. Forms are an important part of webpages, so we have a special section of filters for selecting the HTML form elements. Certain HTML elements are form specific and certain form elements too, have unique properties.

The Form filters can be categorized into three groups:

By Element Type

By Element’s State (Enabled/Disabled)

By Element’s Status (Checked/Selected)

By Element Type

These filters target the form elements by the element type. These are the most common of the form filters. The filters are available to select each type of form element. So, we have following form filters:

By Element’s State (Enabled/Disabled)

All form elements might not be enabled all the time. So, you might need to select form elements that are either in enabled or disabled state. There are two filters for the purpose of selecting such form elements. The :enabled filter allows you to select all the enabled form elements and :disabled lets you filter all the disabled elements.

//Selects all disabled elements
$(":disabled");

By Element’s Status (Checked/Selected)

The radio buttons and checkboxes have unique properties of selected and checked respectively. Therefore, the filters :selected and :checked to filter the selected radio buttons and checked checkboxes.

//Selects all the checked form elements
$(":checked");
//Selects all the selected form elements
$(":selected");

With this post, we conclude the topic of selecting DOM elements with jQuery.