Form Element Selector

Form element selector is used to select the element of form like button, input, image checkbox, password, radio, reset etc.

: button Selector

This type of selector is used to select all input buttons plus all button elements.

Example :

$(":button").css({background:"yellow", border:"3px red solid"});

It changes the color and border of all buttons.

: checkbox Selector

It selects all the element of type checkbox.

Example :

$("form input: checkbox").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});

It select all the checkboxes of form and create a border around it and changes it's color also.

: checked Selector

The :checked selector works for checkboxes and radio buttons. For select elements, use the :selected selector. Matches all elements that are checked.

Example :

$("input: checked").length;

It gives the number of input elements that are checked.

: disabled Selector

It selects all the elements that are disabled.

Example : It finds all input elements that are disabled.

<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> <script>$("input: disabled").val("this is it");</script>

: enabled Selector

It selects all the element that are enabled.

Example :

It selects all the input element that are enabled .

<form> <input name="email" disabled="enabled" /> <input name="id" /> </form> <script>$("input: enabled").val("this is it");</script>

: file Selector

It selects all the element of 'file' type.

Example :

$("input: file").css({background:"yellow", border:"3px red solid"}); 0

: image Selector

It selects all the image type elements.

Example : 1

$("input: image").css({background:"yellow", border:"3px red solid"});

: input Selector

It selects all the input elements. Input elements like input, textarea, select and button etc. 2

Example :

var allInputs = $(":input");

It counts the number of input elements and save it to "allInputs" variable. 3

: password Selector

It selects all the element of type password.

Example : 4

$("input: password").css({background:"yellow", border:"3px red solid"});

: radio Selector

This type of selector selects all element of radio type. 5

Example :

$("form input: radio").css({background:"yellow"});

: reset Selector 6

This type of selector selects all element of radio type.

Example :

$("input: reset").css({background:"yellow", border:"3px red solid"}); 7

: submit Selector

This type of selector selects all element of submit type.

Example : 8

$("td :submit").parent('td').css({background:"yellow", border:"3px red solid"})

It changes the background color and border of all the 'submit' type whose parent is ' td '.

: text Selector 9

It selects all element of type submit .

Example :

$("form input: text").css({background:"yellow", border:"3px red solid"}); 0

It selects all text inputs :

: selected Selector

It selects all the elements that are selected. 1

Example : ( )

<!DOCTYPE html>
<html>
<head>
<style>

div { color:blue; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<select name="cloths" multiple="multiple">
<option>Shirt</option>
<option selected="selected">T-Shirt</option>

<option>Jeans</option>
<option selected="selected">Trousers</option>
<option>Skirts</option>
<option>Coats</option>

</select>

<div></div>
You can select multiple option by pressing "ctrl" key.
<br>Can deselect the option by clicking on it.
<script>
$("select").change(function () {
var str = "YOU SELECTED :";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
</script>
</body>
</html>

OUTPUT : 2

When you select any item It will display to you :

Download Source Code 3

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Form Element Selector