Form Element Selector

Ads
 

Form Element Selector

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

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

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"});

: image Selector

It selects all the image type elements.

Example :

$("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.

Example :

var allInputs = $(":input");

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

: password Selector

It selects all the element of type password.

Example :

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

: radio Selector

This type of selector selects all element of radio type.

Example :

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

: reset Selector

This type of selector selects all element of radio type.

Example :

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

: submit Selector

This type of selector selects all element of submit type.

Example :

$("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

It selects all element of type submit .

Example :

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

It selects all text inputs :

: selected Selector

It selects all the elements that are selected.

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 :

When you select any item It will display to you :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Ads

Ads