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.
jQuery Get Multiple Checkbox values
jQuery :checked selector
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>
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>
