This Chapter of Technical Magz Tutorial evaluates that How to get the value from input checkbox with Id attribute while clicking a button using HTML & Java Script.
To show how it works, we have already created a set of code which you can copy very easily but it is better to understand the functionality of the code before using it because the intent of this code might be different from yours. So it is better idea to give little moment to it before using in to your codes.
Important: JQuery library is hosted by both Google and Microsoft both but it work only when you working with internet. It will not work offline until it is host on your local drive or cached in to you browser.
So friends I hope you’ve understand the code properly if you have any problem send me message using blog message box or disqus chat box.
Subscribe our NEWSLETTER
For Latest Tech Tutorials, Blog Tips and SEO Tips on Technical Magz
Also Follow us on Social Media Sites
To show how it works, we have already created a set of code which you can copy very easily but it is better to understand the functionality of the code before using it because the intent of this code might be different from yours. So it is better idea to give little moment to it before using in to your codes.
Creating HTML code where checkbox is defined
Now down here we have created a Standard HTML webpage where checkbox are show with their values. Just copy to your text editor and understand the codes. Here we are about grab the value of check box from its ‘ID’ attribute.HTML code Structure where Checkbox values defined
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get Values of Selected Checboxes</title>
</head>
<body>
<form>
<h3>Check your favorite Subject:</h3>
<label><input type="checkbox" value="Physics" id="subject">Physics</label>
<label><input type="checkbox" value="Chemistry" id="subject">Chemistry</label>
<label><input type="checkbox" value="Biology" id="subject">Biology</label>
<label><input type="checkbox" value="Geology" id="subject">Geology</label>
<label><input type="checkbox" value="Zoology" id="subject">Zoology</label>
<br>
<br>
<button type="button">Get Subjects</button>
</form>
</body>
</html>
Include JQuery library to HTML page
The JQuery library is a single JavaScript file, and you reference it with the HTML <script> tag but be noted that the <script> tag should be inside the <head> section like the example illustrated below:
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "></script>
Javascript function
Add this Javascript function in to head section with in <script> tags.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
var favorite = [];
$.each($("#subject:checked"), function(){
favorite.push($(this).val());
});
alert("My favourite sports are: " + favorite.join(", "));
});
});
</script>
Important: JQuery library is hosted by both Google and Microsoft both but it work only when you working with internet. It will not work offline until it is host on your local drive or cached in to you browser.
Final code with Javascript function
The function of the code can be define as when button is clicked the function myfunction() is invoked and JQuery fetch the value of selected input checkbox using $(‘#sub : chekced’) selector push each checkbox value in 'favorite' variable and returns the value in alert box.
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get Values of Selected Checboxes</title>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
var favorite = [];
$.each($("#subject:checked"), function(){
favorite.push($(this).val());
});
alert("My favourite sports are: " + favorite.join(", "));
});
});
</script>
</head>
<body>
<form>
<h3>Check your favorite Subject:</h3>
<label><input type="checkbox" value="Physics" id="subject">Physics</label>
<label><input type="checkbox" value="Chemistry" id="subject">Chemistry</label>
<label><input type="checkbox" value="Biology" id="subject">Biology</label>
<label><input type="checkbox" value="Geology" id="subject">Geology</label>
<label><input type="checkbox" value="Zoology" id="subject">Zoology</label>
<br>
<br>
<button type="button">Get Subjects</button>
</form>
</body>
</html>
So friends I hope you’ve understand the code properly if you have any problem send me message using blog message box or disqus chat box.
Subscribe our NEWSLETTER
For Latest Tech Tutorials, Blog Tips and SEO Tips on Technical Magz
Also Follow us on Social Media Sites
