The checked state of a checkbox
In your web projects, you may require using the checkbox state of a checkbox for hiding or displaying a certain section in a form or other content of the web page or doing some other action.
For example, enabling a “Submit/Next” button as “Agree with T &Cs” checkbox is clicked and disabling that button if that checkbox is unchecked to not allow users proceeding to create an account.
Similarly, you may associate a textarea with a checkbox checked state if a user ticks it to enter the feedback.
In this tutorial, I am going to show how you may get the checkbox checked or unchecked state and perform the certain action based on this using jQuery / JavaScript.
An example of displaying a div if checkbox is checked
In this example, a checkbox is created with the checked status initially. If it is checked, the div tag with dummy text will display. If you uncheck this, the div will disappear. First, have a look at the demo and I will explain how it is done:
See online demo and code
The complete code of demo:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#demochecked').click(function() {
$("#chkdemo").toggle(this.checked);
});
});
</script>
<style>
.divcls
{
width:250px;
height: auto;
padding:20px;
background-color:#009700;
color:#fff;
font-size:15px;
}
</style>
</head>
<body>
<div class="divcls"><p>jQuery checked demo</p>
<input type="checkbox" checked id="demochecked"/>Tick / Uncheck the checkbox
<p id="chkdemo" style="color: yellow;font-size:20px;">The checkbox is checked!!</p>
</div>
</body>
</html>
You saw, the click event of the checkbox is used while the jQuery toggle method hidden or displayed the div element. Is not that simple as using the jQuery? See another way of using the jQuery below.
A demo of showing/hiding a form with checkbox state
In this example, the change event of the checkbox is used in the jQuery code. As the checkbox is checked or unchecked, it will execute the code inside it.
For the demo, I am hiding a div element that contains a form which is developed by using the Bootstrap built-in classes. So a reference to the jQuery along with the Bootstrap CSS is also included in the <head> section.
Tick or uncheck the checkbox for hiding or displaying the form. The $.show and $.hide methods of jQuery are used to display and hide the div element, have a look:
See online demo and code
The complete code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script>
$(document).ready(function() {
$("#demochecked").change(function() {
if(this.checked) {
$("#chkboxdemo").show();
}
else
{
$("#chkboxdemo").hide();
}
})
});
</script>
<style>
.divcls
{
width:auto;
height: auto;
padding:20px;
background-color:#4D9999;
color:#fff;
font-size:15px;
}
</style>
</head>
<body>
<div class="divcls"><p>jQuery checkbox check/uncheck demo with a form</p>
<input type="checkbox" checked id="demochecked"/>Create Account? Yes / No
</div>
<div class="container" id="chkboxdemo">
<h1>Fill in the form below for creating account</h1>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name1" class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="fname" placeholder="Your First Name">
</div>
</div>
<div class="form-group">
<label for="name1" class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="lname" placeholder="Your Last Name">
</div>
</div>
<div class="form-group">
<label for="gender1" class="col-sm-2 control-label">Gender:</label>
<div class="col-sm-2">
<select class="form-control" name="ygender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="form-group">
<label for="email1" class="col-sm-2 control-label">Your Email:</label>
<div class="col-sm-5">
<input type="email" class="form-control" name="yemail" placeholder="Enter Email address">
</div>
</div>
<div class="form-group">
<label for="password1" class="col-sm-2 control-label">Password:</label>
<div class="col-sm-3">
<input type="password" class="form-control" name="ypassword" placeholder="(Must be 8 characters long)">
</div>
</div>
<div class="form-group">
<label for="address1" class="col-sm-2 control-label">Address:</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="postaddress" placeholder="Where do you live?">
</div>
</div>
<div class="col-sm-offset-2 col-sm-5">
<p><input type="submit" class="btn btn-lg btn-block btn-success" value="Create My Account"></p>
</div>
</div>
</form>
</body>
</html>
In the demo page, look at the jQuery code where checkbox’s checked and unchecked state is handled and the if condition is used to show / hide the form.
A demo of checkbox with JavaScript
If you do not want using the jQuery for managing checkbox status and performing a certain action based on it then you may use a JavaScript based solution as well.
In this example, the getElementById javaScript property is used for getting the status of the checkbox. If this is checked, the button will display otherwise it will hide.
See online demo and code
The code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.divcls
{
width:200px;
height: 80px;
padding:20px;
background-color:#4D9999;
color:#fff;
font-size:15px;
}
</style>
</head>
<body>
<div class="divcls"><input type="checkbox" checked id="demochecked"/>Show/Hide button</div>
<br />
<div class="col-sm-offset-2 col-sm-5" id="chkboxdemo">
<p><input type="submit" class="btn btn-lg btn-danger" value="Save Information"></p>
</div>
<script>
var chkstatus = document.getElementById('demochecked');
var btnshowhide = document.getElementById('chkboxdemo');
chkstatus.onchange = function() {
btnshowhide.hidden = this.checked ? false : true;
};
</script>
</body>
</html>
You can see the JS code above the </body> tag for checking the status of checkbox and showing/hiding the button.
You may use links, buttons, paragraphs, div or other elements there.
Using $.on method of jQuery to work with checkbox status demo
In above example, the $.click event is used directly. You may also use the $.on method with click event for managing checked or unchecked state of the checkbox.
See this demo where I have used an HTML table that will hide upon unchecking the checkbox and will display as you tick the checkbox. Again, the toggle method is used, so if the table is visible, it will hide and vice versa:
See online demo and code
The complete code including the markup, jQuery, and CSS:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#demochecked").on("change", function(){
$("#chkshowhide").toggle(this.checked);
});
});
</script>
<style>
.divcls
{
padding:20px;
background-color:#000080;
color:#fff;
font-size:15px;
}
/*CSS for the table*/
.demotbl {
border-collapse: collapse;
border: 1px dashed #859FB1;
}
.demotbl th{
border: 2px solid #96ADBC;
color: #3E5260;
padding:10px;
}
.demotbl td{
border: 1px dotted #232F36;
color: #002F5E;
padding:15px;
width:100px;
}
</style>
</head>
<body>
<div class="divcls"><input type="checkbox" name="mycheckbox" checked id="demochecked"/>Show/Hide HTML Table</div>
<br />
<table class="demotbl" id="chkshowhide">
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
<tr>
<td>prod-1</td>
<td>Wheat</td>
<td>Good</td>
<td>333 Bags</td>
</tr>
<tr>
<td>prod-2</td>
<td>Rice</td>
<td>Good</td>
<td>111 Bags</td>
<tr>
<td>prod-3</td>
<td>Sugar</td>
<td>Good</td>
<td>1200 Bags</td>
</tr>
</table>
</body>
</html>
You can see, the result is the same as in the first example.