To get an array of selected checkboxes values we need to use jQuery each() method and :checked selector on a group of checkboxes.
The each() method will loop over the checkboxes group in which we can filter out selected checkboxes using <strong>:checked</strong> selector.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Get Values of Selected Checkboxes</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$("#get-selected").click(function () {
var open = [];
$.each($("input:checkbox[name='day']:checked"), function () {
open.push($(this).val());
});
alert("We remain open on: " + open.join(", "));
})
});
</script>
</head>
<body>
<h1>When you are open?</h1>
<label>
<input type="checkbox" value="monday" name="day"> Monday
</label>
<label>
<input type="checkbox" value="tuesday" name="day"> Tuesday
</label>
<label>
<input type="checkbox" value="wednesday" name="day"> Wednesday
</label>
<label>
<input type="checkbox" value="thursday" name="day"> Thursday
</label>
<label>
<input type="checkbox" value="friday" name="day"> Friday
</label>
<label>
<input type="checkbox" value="saturday" name="day"> Saturday
</label>
<label>
<input type="checkbox" value="sunday" name="day"> Sunday
</label>
<p>
<button id="get-selected">Get Selected Days</button>
</p>
</body>
</html>
Category: jQuery