How to check and uncheck a checkbox with a button using jQuery

January 4, 2021 admin

In this tutorial, we are going to see how to check and uncheck a checkbox with jQuery. You can easily use the method prop() of jQuery to check / uncheck the checkbox dynamically, for example by clicking a button. The prop() method requires a version of jQuery > 1.6.

How to check and uncheck a checkbox with a button using jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Check and uncheck a checkbox with a button</title>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".check").click(function(){
					$("#myCheckbox").prop("checked", true);
				});
				$(".uncheck").click(function(){
					$("#myCheckbox").prop("checked", false);
				});
			});
		</script>
	</head>
	<body>
		<p><input type="checkbox" id="myCheckbox"> Click on the button to check / uncheck the Checkbox.</p>
		<button type="button" class="check">Check</button>
		<button type="button" class="uncheck">Uncheck</button>
	</body>
</html>