How To Get Selected Checkbox Values In Javascript?

Jul 08, 2021 . Admin

Hello Friends,

Now let's see example of how to get selected checkbox value example. We will use how to get selected checkbox value in javascript. Here you will learn how to use javascript get selected checkbox value. This is a short guide on get selected checkbox value. Let's get started with how to get selected checkbox value in javascript.

Here i will give you many example how you can get selected checkbox value javascript.

Example : 1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How To Get Selected Checkbox Values In Javascript?</title>
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	</head>
	<body class="bg-dark">
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h5>JavaScript Get Selected Checkbox Value</h5>
						</div>
						<div class="card-body">
							<input type="checkbox" name="sub" value="Laravel"> Laravel<br>
							<input type="checkbox" name="sub" value="JavaScript"> JavaScript<br>
							<input type="checkbox" name="sub" value="Jquery"> JQuery<br>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$(document).ready(function() {
			  	var ckbox = $("input[name='sub']");
			  	var chksub = '';
			  	$('input').on('click', function() {
				    if (ckbox.is(':checked')) {
				      	$("input[name='sub']:checked").each ( function() {
				   			chksub = $(this).val() + ",";
				        	chksub = chksub.slice(0, -1);
				 	  	});
				       alert ( $(this).val() ); // return all values of checkboxes checked
				       alert(chksub); // return value of checkbox checked
				    }     
			  	});
			});
		</script>
	</body>
</html>

Output :

JavaScript

Example : 2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How To Get Selected Checkbox Values In Javascript?</title>
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	</head>
	<body class="bg-dark">
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h5>JavaScript Get Selected Checkbox Value</h5>
						</div>
						<div class="card-body">
							<p>Choose your hobby :</p>
						    <div>
							    <input type="checkbox" id="sports" name="hobby" value="sports">
							    <label for="sports">sports</label>
						    </div>
						    <div>
							    <input type="checkbox" id="dance" name="hobby" value="dance">
							    <label for="dance">dance</label>
						    </div>
						    <div>
						    	<button id="submit" class="btn btn-primary">Get Value</button>
						    </div>
						    <br>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			document.getElementById('submit').onclick = function() {
			    if (document.getElementById('sports').checked) {
			        alert(document.getElementById('sports').value);
			    }
			    else if (document.getElementById('dance').checked) {
			        alert(document.getElementById('dance').value);
			    }
			}
		</script>
	</body>
</html>

Output :