jQuery get multiple checkbox value; Through this tutorial, i am going to show you how to get multiple checkbox values to comma separated string and array using jQuery :checked selector.
jQuery Get Multiple Checkbox values
Using the jQuery :checked selector; you can get multiple checkbox values to comma separated string and array in jQuery:
- jQuery Get Multiple Checkbox values to comma separated string
- jQuery Get All Checked Checkbox Values in Array
jQuery Get Multiple Checkbox values to comma separated string
See the following example with demo to multiple checkbox values to comma separated string from html elements using jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Values of Selected Checboxes</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn_click").click(function(){
var programming = $("input[name='programming']:checked").map(function() {
return this.value;
}).get().join(', ');
alert("My favourite programming languages are: " + programming);
});
});
</script>
</head>
<body>
<form>
<h3>Select your favorite Programming Languages :</h3>
<label><input type="checkbox" value="PHP" name="programming"> PHP</label>
<label><input type="checkbox" value="Java" name="programming"> Java</label>
<label><input type="checkbox" value="Ruby" name="programming"> Ruby</label>
<label><input type="checkbox" value="Python" name="programming"> Python</label>
<label><input type="checkbox" value="JavaScript" name="programming"> JavaScript</label>
<label><input type="checkbox" value="C" name="programming"> C</label>
<br>
<button type="button" class="btn_click" style="margin-top: 10px;">Click here to Get Values</button>
</form>
</body>
</html>
Demo of jQuery Get Multiple Checkbox values to comma separated string
jQuery Get All Checked Checkbox Values in Array
See the following example with demo to get all checked checkbox value in array from html elements using jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Values of Selected Checboxes</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn_click_second").click(function(){
var favProgramming1 = [];
$.each($("input[name='programming1']:checked"), function(){
favProgramming1.push($(this).val());
});
alert("My favourite programming languages are: " + favProgramming1 );
console.log(favProgramming1);
});
});
</script>
</head>
<body>
<form>
<h3>Select your favorite Programming Languages :</h3>
<label><input type="checkbox" value="PHP" name="programming1"> PHP</label>
<label><input type="checkbox" value="Java" name="programming1"> Java</label>
<label><input type="checkbox" value="Ruby" name="programming1"> Ruby</label>
<label><input type="checkbox" value="Python" name="programming1"> Python</label>
<label><input type="checkbox" value="JavaScript" name="programming1"> JavaScript</label>
<label><input type="checkbox" value="C" name="programming1"> C</label>
<br>
<button type="button" class="btn_click_second" style="margin-top: 10px;">Click here to Get Values</button>
</form>
</body>
</html>
Demo of jQuery Get All Checked Checkbox Values in Array
Note that, open your console by pressing F12 and see the get all checked checkbox value in array.
Recommended jQuery Tutorials
Recommended:-jQuery Trigger Mouseup Event Method
Recommended:-jQuery Mouseover & MouseOut Event Method
Recommended:-jQuery Animation Effect Methods
Recommended:-jQuery FadeIn Animation Example
Recommended:-Fade Out Animation jQuery
Recommended:-jQuery FadeToggle Animation Example
Recommended:-jQuery FadeTo Animation Example
Recommended:-jQuery slideDown() Animation Example
Recommended:-jQuery SlideUp() Animation Example
Recommended:-jQuery SlideToggle Animation Effect Example
Recommended:-jQuery Replace HTML Content in Element
Recommended:-jQuery Replace Text in Div,Span, p, Textarea
Recommended:-jQuery Get and Set Input box By Name, Id
Recommended:-Get and Set CSS Property in jQuery
Recommended:-jQuery Insert Content Before or After an Element
Recommended:-jQuery HTML Append Prepend Example
Recommended:-jQuery Remove Text & Element From HTML
Recommended:-jQuery Add Remove Class on onClick
Recommended:-jQuery Set Checkbox Checked
Recommended:-jQuery Get Checkbox Checked Value
Be First to Comment