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 |
 |
 |
