In this blog we will learn, how to Get The Values of Selected Checkboxes in a group using jQuery.
Get The Values of Selected Checkboxes in a group using jQuery
If you want to get checked checkboxes from a particular checkbox group, depending on your choice which button you have clicked, you can use $(‘input[name=”hobbies”]:checked’) or $(‘input[name=”country”]:checked’). This will sure that the checked checkboxes from only the hobbies or country checkbox group are selected.
We can use here The each() function for iterates over all the checkboxes that are checked.
Key Point :
Add this jQuery link in head section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#btnSelectedHobbies').click(function () {
debugger;
var result = $('input[name="hobbies"]:checked');
if (result.length > 0) {
var hobbies = result.length + " Hobbies is Selected <br/>";
//The each() function used here for iterates over all the checkboxes that are checked from
//hobbies group.
result.each(function () {
hobbies += $(this).val() + "<br/>";
})
$('#divSelectedHobbies').html(hobbies);
}
else {
$('#divSelectedHobbies').html("Please Select hobbies");
}
})
$('#btnSelectedCountry').click(function () {
var country = $('input[name="country"]:checked');
if (country.length > 0) {
var CountryData = country.length + " Country is Selected <br/> ";
//The each() function used here for iterates over all the checkboxes that are checked from
//country group.
country.each(function () {
CountryData += $(this).val() + "<br/>";
})
$('#divSelectedCountry').html(CountryData);
}
else {
$('#divSelectedCountry').html("please select Country ");
}
})
})
</script>
</head>
<body>
Select Hobbies:
<input type="checkbox" name="hobbies" value="Swimming" />Swimming
<input type="checkbox" name="hobbies" value="Singing" />Singing
<input type="checkbox" name="hobbies" value="Coding" />Coding
<input type="checkbox" name="hobbies" value="Travelling" />Travelling
<br /><br />
Select Country:
<input type="checkbox" name="country" value="India" />India
<input type="checkbox" name="country" value="US" />US
<input type="checkbox" name="country" value="Sri Lanka" />Sri Lanka
<input type="checkbox" name="country" value="England" />England
<br /><br />
<input type="submit" id="btnSelectedHobbies" value="Get Selected Hobbies" />
<input type="submit" id="btnSelectedCountry" value="Get Selected Country" />
<br /><br />
<div id="divSelectedHobbies"></div>
<br /><br />
<div id="divSelectedCountry"></div>
</body>
</html>
Result :
Any Question and suggestion related to this article please comment me, Thank you
