Jquery checkbox toggle

For checkbox input type, when we tick checkbox we have enabled an input element enclosed in a div tag and when this checkbox in unchecked we hide the same.

Example

<!DOCTYPE html>
<html>
<head>
<title>jQuery Toggle 2</title>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
	
</script>
<script>
	$(document).ready(function() {
		$("#privatePostPassword").hide(); // hiding div on load

		$("#postPublicOrPrivate").change(function() { // change event for checkbox
			
			// checking if the box is checkedm if yes execute this otherwise else
			if (this.checked) { 
				$("#privatePostPassword").show();
			} else {
				$("#privatePostPassword").hide();
			}
		});
	});
</script>
</head>
<body>
	Do you have any criminal convictions :
	
	<form>

	<input id="postPublicOrPrivate" type="checkbox" />
	<br>

	<div id="privatePostPassword">
		<input type="text" class="form-control" id="postPassword" />
	</div>
	
	</form>

</body>
</html>

Output

Checkbox checked Checkbox unchecked
checked unchecked
Share

You may also like...