How To Get All Checkboxes Checked in JavaScript?

Jun 18, 2021 . Admin

Hello Friends,

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

Here i will give you many example how you can get all checkboxes checked javascript.

Example : 1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How To Get All Checkboxes Checked in JavaScript?</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h3>How To Get All Checkboxes Checked</h3>
						</div>
						<div class="card-body">
							<p>Tick the all checkboxes and check all values show in console.</p>	
							<div id="company">
							  	<input type="checkbox" name="check" value="55" />
							  	<input type="checkbox" name="check" value="90.2" />
							  	<input type="checkbox" name="check" value="99" />
							  	<input type="checkbox" name="check" value="80.21" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$('#company').change(function() {
		  	var values = 0.00;
		  	{
		    	$('#company :checked').each(function() {
		      		values=values+parseFloat(($(this).val()));
		    	});
		    	console.log( parseFloat(values));
		  	}
		});
	</script>
</html>
Output : 
(1)80.21
(2)170.41
(3)225.40999999999997
(4)324.40999999999997
Example : 2 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How To Get All Checkboxes Checked in JavaScript?</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h3>How To Get All Checkboxes Checked</h3>
						</div>
						<div class="card-body">
							<p>Tick the all checkboxes and check all values show in console.</p>
							<div id="test">
							  	<input type="checkbox" name="check" value="4" />
							  	<input type="checkbox" name="check" value="3" />
							  	<input type="checkbox" name="check" value="1" />
							  	<input type="checkbox" name="check" value="5" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$('#test').change(function() {
		  	var values = [];
		  	{
		    	$('#test :checked').each(function() {
		      		values.push($(this).val());
		    	});
		    	console.log(values);
		  	}
		});
	</script>
</html>
Output : 
(1)["4"]
(2)["4", "3"]
(3)["4", "3", "1"]
(4)["4", "3", "1", "5"]

It will help you...

#Javascript

You might also like...