You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
jQuery offers several pseudo-selectors that help find elements in forms. These are especially helpful because it can be difficult to distinguish between form elements based on their state or type using standard CSS selectors.
118
118
119
-
#### :button
120
-
121
-
Using the `:button` pseudo-selector targets any `<button>` elements and elements with a `type="button"`:
122
-
123
-
```
124
-
$( "form :button" );
125
-
```
126
-
127
-
In order to get the best performance using `:button`, it's best to first select elements with a standard jQuery selector, then use `.filter( ":button" )`. More can be seen on the [jQuery :button documentation page](http://api.jquery.com/button-selector/). Another option is to precede the pseudo-selector with a tag name or some other selector.
128
-
129
-
#### :checkbox
130
-
131
-
Using the `:checkbox` pseudo-selector targets any `<input>` elements with a `type="checkbox"`:
132
-
133
-
```
134
-
$( "form :checkbox" );
135
-
```
136
-
137
-
Much like the `:button` pseudo-selector, it's best to first select elements with a standard jQuery selector, then to use `.filter( ":checkbox" )`, or to precede the pseudo-selector with some other selector.
138
-
139
119
#### :checked
140
120
141
121
Not to be confused with *:checkbox*, `:checked` targets *checked* checkboxes, but keep in mind that this selector works also for *checked* radio buttons, and `<select>` elements (for `<select>` elements only, use the `:selected` selector):
@@ -166,30 +146,6 @@ $( "form :enabled" );
166
146
167
147
In order to get the best performance using `:enabled`, first select elements with a standard jQuery selector, then use `.filter( ":enabled" )`, or precede the pseudo-selector with a tag name or some other selector.
168
148
169
-
#### :file
170
-
171
-
Using the `:file` pseudo-selector targets any `<input>` elements that have a `type="file"`:
172
-
173
-
```
174
-
$( "form :file" );
175
-
```
176
-
177
-
In order to get the best performance using `:file`, first select elements with a standard jQuery selector, then use `.filter( ":file" )`, or precede the pseudo-selector with a tag name or some other selector.
178
-
179
-
**Note:** For better performance in modern browsers, use `[type="file"]` instead of the `:file` pseudo-selector.
180
-
181
-
#### :image
182
-
183
-
Using the `:image` pseudo-selector targets any `<input>` elements that have a `type="image"`:
184
-
185
-
```
186
-
$( "form :image" );
187
-
```
188
-
189
-
In order to get the best performance using `:image`, first select elements with a standard jQuery selector, then use `.filter( ":image" )`, or precede the pseudo-selector with a tag name or some other selector.
190
-
191
-
**Note:** For better performance in modern browsers, use `[type="image"]` instead of the `:image` pseudo-selector.
192
-
193
149
#### :input
194
150
195
151
Using the `:input` selector selects all `<input>`, `<textarea>`, `<select>`, and `<button>` elements:
@@ -198,49 +154,6 @@ Using the `:input` selector selects all `<input>`, `<textarea>`, `<select>`, and
198
154
$( "form :input" );
199
155
```
200
156
201
-
#### :password
202
-
203
-
Using the `:password` pseudo-selector targets any `<input>` elements with a `type="password"`:
204
-
205
-
```
206
-
$( "form :password" );
207
-
```
208
-
209
-
In order to get the best performance using `:password`, first select elements with a standard jQuery selector, then use `.filter( ":password" )`, or precede the pseudo-selector with a tag name or some other selector.
210
-
211
-
**Note:** For better performance in modern browsers, use `[type="password"]` instead of the `:password` pseudo-selector.
212
-
213
-
#### :radio
214
-
215
-
Using the `:radio` pseudo-selector targets any `<input>` elements that have a `type="radio"`:
216
-
217
-
```
218
-
$( "form :radio" );
219
-
```
220
-
221
-
To select a set of associated radio buttons use:
222
-
223
-
```
224
-
// Selects all radio buttons with the name attribute of gender.
225
-
$( "form input[name='gender']:radio" );
226
-
```
227
-
228
-
In order to get the best performance using `:radio`, first select elements with a standard jQuery selector, then use `.filter( ":radio" )`, or precede the pseudo-selector with a tag name or some other selector.
229
-
230
-
**Note:** For better performance in modern browsers, use `[type="radio"]` instead of the `:radio` pseudo-selector.
231
-
232
-
#### :reset
233
-
234
-
Using the `:reset` pseudo-selector targets any `<input>` elements that have a `type="reset"`:
235
-
236
-
```
237
-
$( "form :reset" );
238
-
```
239
-
240
-
In order to get the best performance using `:reset`, first select elements with a standard jQuery selector, then use `.filter( ":reset" )`, or precede the pseudo-selector with a tag name or some other selector.
241
-
242
-
**Note:** For better performance in modern browsers, use `[type="reset"]` instead of the `:reset` pseudo-selector.
243
-
244
157
#### :selected
245
158
246
159
Using the `:selected` pseudo-selector targets any selected items in `<option>` elements:
@@ -251,26 +164,18 @@ $( "form :selected" );
251
164
252
165
In order to get the best performance using `:selected`, first select elements with a standard jQuery selector, then use `.filter( ":selected" )`, or precede the pseudo-selector with a tag name or some other selector.
253
166
254
-
#### :submit
255
-
256
-
Using the `:submit` pseudo-selector targets any `<button>` or `<input>` elements with a `type="submit"`:
167
+
#### Selecting by type
257
168
258
-
```
259
-
$( "form :submit" );
260
-
```
261
-
262
-
The `:submit` selector usually applies to `<button>` or `<input>` elements. Some browsers (such as Internet Explorer) do not automatically give the `<button>` element a `type="submit"` by default.
263
-
264
-
**Note:** For better performance in modern browsers, use `[type="submit"]` instead of the `:submit` pseudo-selector.
265
-
266
-
#### :text
267
-
268
-
Using the `:text` pseudo-selector targets any `<input>` elements with a `type="text"`:
269
-
270
-
```
271
-
$( "form :text" );
272
-
```
169
+
jQuery provides pseudo selectors to select form-specific elements according to their type:
273
170
274
-
In order to get the best performance using `:text`, first select elements with a standard jQuery selector, then use `.filter( ":text" )`, or precede the pseudo-selector with a tag name or some other selector.
**Note:** As of jQuery 1.5.2, `:text` selects `<input>` elements that have no specified *type* attribute. So, `type="text"` is implied.
181
+
For all of these there are side notes about performance, so be sure to check out [the API docs](http://api.jquery.com/category/selectors/form-selectors/) for more in-depth information.
0 commit comments