HOW TO GET VALUE OF MULTIPLE CHECKBOX CLICKED IN JQUERY AND SHOW IN DIV
HOW TO GET VALUE OF MULTIPLE CHECKBOX CLICKED IN JQUERY AND SHOW IN DIV.
Sometimes student or professional have to need to get a value of multiple checkboxes clicked and show in Div. Here is the solution to that :
Step 1: Make two or more checkbox input
<input type="checkbox" value="cricket" />Cricket
<input type="checkbox" value="hockey" />Hockey
Step 2: Assign class in checkbox input and give class name whatever you want, Here in this e.g class name is hobbies.
<input type="checkbox" value="cricket" />class="hobbies">Cricket
<input type="checkbox" value="hockey" />class="hobbies ">Hockey
Step 3: Make div, paragraph or any place where you want to show the selected value of the checkbox. Here we are using div to show the selected value of the checkbox
Step 4: Use JQuery library in header or footer for running JQuery code.
Step 5: Use JQuery script after using the JQuery library, paste this code in footer before closing body tag.
[removed]// <![CDATA[ $(document).ready(function(){ $(".hobbies").click(function(){ var testval = []; $('.hobbies:checked').each(function() { testval.push($(this).val()); }); alert(testval); }); }); // ]]>[removed]
Here in this script, the logic is that :
- We are selecting checkbox input by using a class selector, Here class name is hobbies.
- Holding multiple values of checkbox into an array variable testval[].
- Checking checkbox is checked or not by using: checked attribute selector in JQuery and iterating or looping to get the value one by one by using each() function in jquery.
- After getting all value of checkbox we are assigning into the div or whatever place wherever we want to show.
Complete Code is here :
Untitled Document [removed][removed] <input class="hobbies " type="checkbox" value="cricket" />Cricket
<input class="hobbies " type="checkbox" value="hockey" />Hockey
[removed]// <![CDATA[
$(document).ready(function(){
$(".hobbies ").click(function(){
var testval = [];
$('.hobbies:checked').each(function() {
testval.push($(this).val());
});
$(“div”).text(testval);
});
});
// ]]>[removed]
