Javascript Check If Checkbox Is Checked Or Unchecked Example


Share:
Published By: Admin, Published On: Jul 06, 2021, Category: Javascript

Hello Friends,

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

Here i will give you many example how you can check if checkbox is checked or unchecked javascript.

Example : 1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</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 Check If Checkbox is Checked or Unchecked</h5>
						</div>
						<div class="card-body">
							<label for="student">
						    <input type="checkbox" id="student" />
						    Do you like JavaScript?</label>
							<br />
							<br />
							<input type="button" id="btnCheck" value = "Check" onclick = "Check()" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
		    function Check() {
		        var student = document.getElementById("student");
		        if (student.checked) {
		            alert("CheckBox checked.");
		        } else {
		            alert("CheckBox not checked.");
		        }
		    }
		</script>
	</body>
</html>
Output :
CheckBox not checked.
Example : 2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript Check If Checkbox Is Checked Or Unchecked Example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</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">
							<h3>Javascript Check If Checkbox is Checked or Unchecked</h3>
						</div>
						<div class="card-body">
							<label for="company">
						    <input type="checkbox" id="company" />
						    Do you like Sports?</label>
							<br />
							<br />
							<input type="button" id="btnCheck" value = "Check" onclick = "Check()" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
		    function Check() {
		        var company = document.getElementById("company");
		        if (company.checked) {
		            alert("CheckBox checked.");
		        } else {
		            alert("CheckBox not checked.");
		        }
		    }
		</script>
	</body>
</html>
Output :
CheckBox checked.

It will help you...

Share: