jQuery checked selector04:33

  • 0
Published on May 28, 2017

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

In this video we will discuss the jQuery :checked selector.

The :checked selector selects all checked checkboxes or radio buttons. Let us understand this with an example.

Selects all checked radio button elements
$(‘input[type=”radio”]:checked’)

Example : When you click the submit button without selecting any radio button, “No radio button checked” message should be displayed.

When you click the submit button after a radio button is checked, then a message stating “Male is checked” or “Female is checked” should be displayed.

Replace < with LESSTHAN symbol and > with GREATERTHAN symbol.

<html>
<head>
<title></title>
<script src=”jquery-1.11.2.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#btnSubmit’).click(function () {
var result = $(‘input[type=”radio”]:checked’);
if (result.length > 0) {
$(‘#divResult’).html(result.val() + ” is checked”);
}
else {
$(‘#divResult’).html(“No radio button checked”);
}
});
});
</script>
</head>
<body style=”font-family:Arial”>
Gender :
<input type=”radio” name=”gender” value=”Male”>Male
<input type=”radio” name=”gender” value=”Female”>Female
<br /><br />
<input id=”btnSubmit” type=”submit” value=”submit” />
<br /><br />
<div id=”divResult”>
</div>
</body>
</html>

Selects all checked checkbox elements
$(‘input[type=”checkbox”]:checked’)

Example : When you click the submit button without checking any checkbox, “No checkbox checked” message should be displayed.

When you click the submit button after checking a checkbox, then a message stating the number of checkboxes checked and their values should be displayed.

<html>
<head>
<title></title>
<script src=”jquery-1.11.2.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#btnSubmit’).click(function () {
var result = $(‘input[type=”checkbox”]:checked’);
if (result.length > 0) {
var resultString = result.length + ” checkboxe(s) checked<br/>”;
result.each(function () {
resultString += $(this).val() + “<br/>”;
});
$(‘#divResult’).html(resultString);
}
else {
$(‘#divResult’).html(“No checkbox checked”);
}
});
});
</script>
</head>
<body style=”font-family:Arial”>
Skills :
<input type=”checkbox” name=”skills” value=”JavaScript” />JavaScript
<input type=”checkbox” name=”skills” value=”jQuery” />jQuery
<input type=”checkbox” name=”skills” value=”C#” />C#
<input type=”checkbox” name=”skills” value=”VB” />VB
<br /><br />
<input id=”btnSubmit” type=”submit” value=”submit” />
<br /><br />
<div id=”divResult”>
</div>
</body>
</html>

Enjoyed this video?
"No Thanks. Please Close This Box!"