Form Element Selector
Posted on September 11, 2011 | Comments Off on Form Element Selector
: 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(‘‘).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.
: enabled Selector
It selects all the element that are enabled.
Example :
It selects all the input element that are enabled .
: 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:
<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>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Sameera at LinkedIn
