jQuery

Get The Values of Selected Checkboxes in a group using jQuery

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.

get-values-of-selected-checkboxes-group-using-jquery

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
[php]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
[/php]
Code:

[php]
<!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>
[/php]

Result :
get-values-of-selected-checkboxes-group-using-jquery-1

get-values-of-selected-checkboxes-group-using-jquery

Any Question and suggestion related to this article please comment me, Thank you

Leave a Reply

Your email address will not be published.