In this Post, you will learn how you can get all the checkboxes values using JQuery.
We will give you two example scripts, one is the script will search the checkboxes on the div wrapping a list of checkboxes, while the second example script is based on the class of the checkbox itself. You can use one of the method, just use the one you feel comfortable with and easier to integrate with your current website.
so before start make sure that you inculde JQuery file to your webpage.
copy paste the below code snippet into the head section of your web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
Now you have two option :
Either You can get checkbox on the basis of classname or by tag name its totaly depends on your requirement and dom structure.
so lets take an example of html page having multiple check boxes :
<html>
<head>
<!-- paste your javascript code here -->
</head>
<body>
<div id="checkboxlist">
<div><input type="checkbox" value="1" class="chk"> Value 1</div>
<div><input type="checkbox" value="2" class="chk"> Value 2</div>
<div><input type="checkbox" value="3" class="chk"> Value 3</div>
<div><input type="checkbox" value="4" class="chk"> Value 4</div>
<div><input type="checkbox" value="5" class="chk"> Value 5</div>
<div>
<input type="button" value="Get Value Using Class" id="buttonClass">
<input type="button" value="Get Value Using Parent Tag" id="buttonParent">
</div>
</div>
</body>
</html>
Below is the JQuery or JavaScripts functions.
/* if the page has been fully loaded we add two click handlers to the button */
$(document).ready(function () {
/* Get the checkboxes values based on the class attached to each check box */
$("#buttonClass").click(function() {
getValueUsingClass();
});
/* Get the checkboxes values based on the parent div id */
$("#buttonParent").click(function() {
getValueUsingParentTag();
});
});
function getValueUsingClass(){
/* declare an checkbox array */
var chkArray = [];
/* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
$(".chk:checked").each(function() {
chkArray.push($(this).val());
});
/* we join the array separated by the comma */
var selected;
selected = chkArray.join(',') ;
/* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
if(selected.length > 0){
alert("You have selected " + selected);
}else{
alert("Please at least check one of the checkbox");
}
}
function getValueUsingParentTag(){
var chkArray = [];
/* look for all checkboes that have a parent id called 'checkboxlist' attached to it and check if it was checked */
$("#checkboxlist input:checked").each(function() {
chkArray.push($(this).val());
});
/* we join the array separated by the comma */
var selected;
selected = chkArray.join(',') ;
/* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
if(selected.length > 0){
alert("You have selected " + selected);
}else{
alert("Please at least check one of the checkbox");
}
}
Paste the above code into head section of your html page .
Hits: 1066