How to get selected checkbox value using jquery

In this tutorial, I will show you how you can get the values of HTML checkbox using jQuery and store them inside an array.

Quick Tip : Disable Right Click Using jQuery

To perform this task we have added a class ‘chkbox’ to each checkbox. When a user clicks the ‘Get Values’ button the script will look for all the checkboxes with class ‘chkbox’ and will inspect if the checkbox is checked. We are using a ‘each’ loop to push the values of checkboxes in an array with the help of push() method.

<html>
<head>
<title>Dynamic Dependent Dropdown</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
    $('#getChkBoxValues').click(function(){
        var chkBoxArray = [];
	$('.chkbox:checked').each(function() {
            chkBoxArray.push($(this).val());
        });
	alert(chkBoxArray);
	});
});
</script>
</head>
<body>
<div align="center">
<h2>How to grab the values of seleted checkboxes in an array using jQuery</h2>
     <a href="http://www.coffeecupweb.com">www.coffeecupweb.com</a>
     <div><input type="checkbox" value="A" class="chkbox" />Option A</div>
     <div><input type="checkbox" value="B" class="chkbox" />Option B</div>
     <div><input type="checkbox" value="C" class="chkbox" />Option C</div>
     <div><input type="checkbox" value="D" class="chkbox" />Option D</div>
     <div><input type="button" value="Get Values" id="getChkBoxValues" /></div>
</div>
</body>
</html>

 

0 Comments

Leave a Comment.