In this article, we will see how to get multiple checkbox values in jquery. Here, we will learn to get the selected checkbox values using jquery.
We will use the :checked selector for checkboxes and radio buttons. It can retrieve the selected value of the checkbox.
When clicking on the checkbox we will push the value in the array using the push() function.
So, let's see get selected checkbox values in jquery, multiple checkbox checked values in javascript, and how to get multiple checkbox values in jquery using an array.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To Get Multiple Checkbox Value In jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<form>
<h3>Select languages:</h3>
<label><input type="checkbox" value="laravel" name="language"> Laravel </label>
<label><input type="checkbox" value="php" name="language"> PHP </label>
<label><input type="checkbox" value="jquery" name="language"> jQuery </label>
<label><input type="checkbox" value="javascript" name="language"> JavaScript </label>
<label><input type="checkbox" value="react" name="language"> React </label>
<label><input type="checkbox" value="angular" name="language"> Angular </label>
<label><input type="checkbox" value="python" name="language"> Python </label>
<br>
<button type="button">Get Selected Values</button>
</form>
<script>
$(document).ready(function() {
$("button").click(function(){
var arr = [];
$.each($("input[name='language']:checked"), function(){
arr.push($(this).val());
});
alert("Your selected languages are: " + arr.join(", "));
});
});
</script>
</body>
</html>
Output:
Top comments (0)