When you select a checkbox from the checkbox list, the checkbox value is saved to the same members. After that, the saved value is displayed when you click the button. To do this, we test with the help of each loop where the check box is checked or unchecked.
#example.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btnClick").click(function() {
var checked = new Array();
$("input[type=checkbox]:checked").each(function() {
checked.push(this.value);
});
if (checked.length > 0) {
alert("checked values: " + checked.join(","));
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="checkbox">
<label><input type="checkbox" name="red" value="red">Red</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="green" value="green">Green</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="yellow" value="yellow">Yellow</label>
</div>
<button type="submit" id="btnClick" class="btn btn-default">Get Value</button>
</div>
</body>
</html>