Checkbox Click Event

This JavaScript program shows how to respond to click events on a checkbox.

CheckboxClickEvent.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<script type="text/javascript" src="CheckboxClickEvent.js"></script>
		<style>
			.cBits {
				background-color:gray;
				border:1px black solid;
				width:fit-content;
				float:left;
			}
			.cDigit {
				font-family:monospace;
				color:lightgreen;
				margin-left:auto;
				margin-right:auto;
				width:fit-content;
			}
			.cCheck {
				margin-left:auto;
				margin-right:auto;
				width:fit-content;
			}
		</style>
	</head>
	<body>
		<div class="cBits">
			<div class="cDigit">1</div>
			<input class="cCheck" type="checkbox" checked onclick="CheckboxClicked()"></input>
		</div>
	</body>
</html>

CheckboxClickEvent.js

function CheckboxClicked() {
	const kqThis = window.event.currentTarget;
	if (kqThis.checked == true) {
		kqThis.parentElement.children[0].innerHTML = "1";
	} else {
		kqThis.parentElement.children[0].innerHTML = "0";
	}
}

Core JavaScript

Checkbox Click Event

CheckboxClickEvent.html

CheckboxClickEvent.js

Output