jQuery get selected checkbox text
jQuery get selected checkbox text
In this video we will discuss how to get the checked checkbox text along with the value.
Here is what we want to do. As we check the checkboxes, we want to display the count of checkboxes checked and their text and values.
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 () {
$('input[name="skills"]').click(function () {
getSelectedCheckBoxes('skills');
});
$('input[name="cities"]').click(function () {
getSelectedCheckBoxes('cities');
});
var getSelectedCheckBoxes = function (groupName) {
var result = $('input[name="' + groupName + '"]:checked');
if (result.length 0) {
var resultString = result.length + " checkbox checked br/ ";
result.each(function () {
var selectedValue = $(this).val();
resultString += selectedValue + " - "
$('label[for="option-' + selectedValue + '"]').text() + " br/ ";
});
$('#div' + groupName).html(resultString);
}
else {
$('#div' + groupName).html("No checkbox checked");
}
};
});
/script
/head
body style="font-family:Arial"
Skills :
input type="checkbox" name="skills" value="js" /
label for="option-js" JavaScript /label
input type="checkbox" name="skills" value="jq" /
label for="option-jq" jQuery /label
input type="checkbox" name="skills" value="cs" /
label for="option-cs" C# /label
input type="checkbox" name="skills" value="vb" /
label for="option-vb" VB /label
br / br /
Preferred Cities :
input type="checkbox" name="cities" value="ny" /
label for="option-ny" New York /label
input type="checkbox" name="cities" value="nd" /
label for="option-nd" New Delhi /label
input type="checkbox" name="cities" value="ln" /
label for="option-ln" London /label
br / br /
Selected Skills: br /
div id="divskills" /div
br /
Selected Cities: br /
div id="divcities" /div
/body
/html