Form Element Selector

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 : ( )

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.