jQuery form selectors
List of form element selectors
jQuery contains filters that make it easy to select form elements. The following table summarizes all of the different form filters.
| Filter | Description |
|---|---|
| :button | Selects all button elements and elements of type button. |
| :checkbox | Selects all elements of type checkbox. |
| :checked | Selects all elements that are checked. |
| :disabled | Selects all elements that are disabled. |
| :enabled | Selects all elements that are enabled. |
| :file | Selects all elements of type fi le. |
| :image | Selects all elements of type image. |
| :input | Selects all input, text area, select and button elements. |
| :password | Selects all elements of type password. |
| :radio | Selects all elements of type radio. |
| :reset | Selects all elements of type reset. |
| :selected | Selects all elements that are selected. |
| :submit | Selects all elements of type submit. |
| :text | Selects all elements of type text. |
The following code show show to get the count of input elements.
<!DOCTYPE html>
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js">
</script>
<script>
$(function(){ <!--from w w w . jav a2 s .c o m-->
var n = $(':input').length;
document.writeln(n);
});
</script>
</head>
<body>
<form name="" method="post">
<input type="text" />
<input type="hidden" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="image" />
<input type="file" />
<input type="checkbox" />
<input type="reset" />
<input type="button" value="hit me"/>
<button>Hit me too</button>
<select>
<option>floor 1</option>
<option>floor 2</option>
</select>
<textarea></textarea>
</form>
</body>
</html>
Get all of the elements
The following code shows a few different ways to get all of the elements in the same form.
<!DOCTYPE html>
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js">
</script>
<script>
$(function(){ <!--from ww w. j a va 2 s . co m-->
var n1 = $("input").length;
var n2 = $(":input").length;
var n3 = $("form > *").length;
var n4 = $(":text").length;
var n5 = $("input[type='text']").length;
document.writeln(n1 + ","+ n2 +","+ n3 + "," + n4 + "," + n5);
});
</script>
</head>
<body>
<form name="" method="post">
<input type="text" />
<input type="text" />
<input type="text" />
</form>
</body>
</html>