jQuery checked selector
In this video we will discuss the jQuery :checked selector.
The :checked selector selects all checked check-boxes 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.
Note: Angle tags removed because it's not accepting while upload this content.
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