jQuery form selectors are used to select all similar specified controls on the html form.
To understand all jQuery selectors first copy the code below. open form in web browser (chrome or firefox). press f12 function key to open developer tools panel. Select console panel.
Apply following form selectors one by one to see the effect.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
table tr td { width:200px; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<div class="col-md-12">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<br />
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
<div class="controls">
<input class="form-control input-lg" placeholder=".input-lg">
<input class="form-control" placeholder="Default input">
<input class="form-control input-sm" placeholder=".input-sm">
<select class="form-control input-lg">
<option value="">.input-lg1</option>
<option value="">.input-lg2</option>
<option value="">.input-lg3</option>
</select>
<select class="form-control">
<option value="">Default select1</option>
<option value="">Default select2</option>
<option value="">Default select3</option>
</select>
<select class="form-control input-sm">
<option value="">.input-sm1</option>
<option value="">.input-sm2</option>
<option value="">.input-sm3</option>
</select>
</div>
<input type="image" style="width:100px;" src="https://swclass.com/Content/images/swc-logo.png" />
<input type="image" style="width:150px;" src="https://swclass.com/Content/images/swc-logo.png" />
<input type="image" style="width:200px;" src="https://swclass.com/Content/images/swc-logo.png" />
<input type="password" class="form-control" />
<textarea rows="6" class="form-control" ></textarea>
<select name="garden" multiple="multiple" class="form-control">
<option>Bus</option>
<option selected="selected">Cars</option>
<option>Ship</option>
<option selected="selected">Jeep</option>
<option>Boat</option>
<option>Bike</option>
</select>
<input type="hidden">
<input type="hidden">
<input type="hidden">
<input type="button" class="btn btn-default" value="Save" />
<input type="button" class="btn btn-default" value="Cancel" />
<input type="reset" class="btn btn-default" value="Reset" />
</form>
</div>
</div>
</div>
</body>
</html>
1) :button Selector
:button Selector is used to select all buttons elements or html controls having button tag or input type is button.
command: $(':button').css("background","red");
Result: Select all button and apply red background color.
2) :checkbox Selector
:checkbox Selector is used to selects all input html elements having type checkbox.
command: $('input:checkbox').wrap("<span></span>").parent().css("border","1px solid red");
Result: Select all checkboxes, add span element around them, select span and apply red color border on it.
3) :checked Selector
:checked Selector used to select all checked checkbox and radio buttons.
command: console.log($('input:checked').length);
Result: select checkboxes and radio button on form and execute above command it will return no. of selected checkboxes and radio buttons.
4) :disabled Selector
:disabled Selector used to select all disabled elements having attribute disabled.
command: $('input:disabled').css("background","red");
Result: It will change the background color of disabled elements to red.
5) :enabled Selector
:enabled Selector used to select all enabled elements not have attribute disabled. it is reverse of :disabled selector.
command: $('input:enabled').css("background","red");
Result: It will change the background color of all enabled elements to red.
6) :file Selector
:file Selector used to select all input controls having type file.
command: $('input:file').css("background","red");
Result: It will change the background color of all file controls to red.
7) :focus Selector
:focus Selector used to selects element if it is currently focused.
In below example, we will create an delegate for focus and blur event. which will change the background-color when we click on any input text box.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
.colored { background-color: #808080!important }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.container').delegate("*", "focus blur", function () {
var e = $(this);
setTimeout(function () {
e.toggleClass("colored", e.is(":focus"));
}, 500);
});
});
</script>
</body>
</html>
8) :image Selector
:image Selector used to select all input controls having type image.
command: $('input:image').css("border","1px solid black");
Result: It will apply black border around all selected input control having type image.
9) :input Selector
:input Selector used to select all input, textarea, select and button elements.
command: $(':input').css("background","red");
Result: It will apply red background color to all input, textarea, select and button controls.
10) :password Selector
:password Selector used to select all input elements having type password.
command: $(':password').css("background","red");
Result: It will apply red background color to all input controls having type password.
11) :radio Selector
:radio Selector used to select all input elements having type radio.
command: $(':radio').wrap("<span></span>").parent().css("background","red");
Result: It will apply red background color to all spans surrounding by input controls having type radio.
12) :reset Selector
:reset Selector used to select all input elements having type reset.
command: $(':reset').css("background","red");
Result: It will apply red background color to all input controls having type reset.
13) :selected Selector
:selected Selector used to select option elements having attribute selected.
command:
$( "select option:selected" ).each(function() {
console.log($(this).val())
});
Result: It will return values from option control having selected attribute.
14) :submit Selector
:submit Selector used to select all input elements having type submit.
command: $('input:submit').css("background","red");
Result: It will apply red background color to all input controls having type submit.
15) :text Selector
:text Selector used to select all input elements having type text.
command: $('input:text').css("background","red");
Result: It will apply red background color to all input controls having type text.
16) :hidden Selector
:hidden Selector used to select all input elements having type hidden.
command:
$('input:hidden').val("0");
$('input:hidden')[0];
Result: It will set all hidden field values to zero.
17) :visible Selector
:visible Selector used to select all elements which are visible.
command: $('input:visible').css("background","red");
Result: It will set background color red for all visible elements.
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.