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>