jQuery get multiple checked checkbox values; In this tutorial, you will learn how to get multiple checked checkbox values in jquery by several examples.
How to get multiple checkbox values and change into comma separated string. Using the jQuery :checked selector, You can get all selected checkbox values.
Here you will learn two different type for get the selected checkbox values.
How to get multiple checkbox value in jquery
Using the jQuery :checked selector can get all selected checkbox values.
Example 1 of get all checked checkbox values
<!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>
Output
In the above example 1 of get all checbox values in comma separated string, we have use map method to get all checked checkbox values and using the join method to convert selected checkbox value into comma separated string
Example 2 of Get All checked checkbox values
<!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 favProgramming = [];
$.each($("input[name='programming1']:checked"), function(){
favProgramming .push($(this).val());
});
alert("My favourite programming languages are: " + favProgramming );
});
});
</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>
Output
In the above example 2 of get all checked checkbox values in comma separated string using jquery Api selector, we have used each method to get all checked checkbox values and using the join method to convert selected checkbox values into comma separated string.
Recommended jQuery Tutorials
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
