Let's discuss, how to get the values of HTML checkbox using jQuery and store them inside an array.
To complete this task, I 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 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.webprogramminghub.blogspot.com">www.webprogramminghub.blogspot.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>
To complete this task, I 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 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.webprogramminghub.blogspot.com">www.webprogramminghub.blogspot.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:
Post a Comment