The HTML checkbox input element allows you to select a single value for submission in a form for example if you are creating a form and want to know if the applicant is fluent in English or not you can have a checkbox and if the user thinks he/she is fluent in English he/she checks it if not leaves it unchecked .
In this tutorial we are going to learn
- How to handle onclick and onchange events and the difference between them
- How to handle checkbox events in Jquery
- How to submit a form when checkbox is clicked
- Show/ Hide a section of the form when checkbox is clicked
To start working with checkboxes we will create a form that contains a checkbox , in this example we will be building a form that takes a user name and has also a checkbox that the user should check if he thinks he is fluent in English , if not a prompt will appear showing the user a text that says you need to be fluent in English to apply for the job.
<form action="">
<label for="name">Name:</label>
<input type="text" name="name"><br>
<label for="language">Do you speak English fluently?</label>
<input type="checkbox" id="fluency" checked />
</form>
Checkbox event handling using pure Javascript
https://codepen.io/prasanthmj/pen/BZZOyP/
Now what we need to do is to attach an event to the checkbox so it checks its state each time it’s changed and show the message if it has been unchecked , notice I added a checked property to the checkbox so it is checked by default.
There are two events that you can attach to the checkbox to be fired once the checkbox value has been changed they are the onclick and the onchange events.
There is a problem with the onchange event is that it is not called until the checked state has been updated and since Internet Explorer does not fire the onChange event till the checkbox loses focus so it will create different results than in Google chrome and other browsers so to avoid all this I recommend you stick to the onclick event.
<input type="checkbox" onclick="checkFluency()" id="fluency" checked />
Here I added an on click event and make it so it will call a function called checkFluency() once it is clicked
function checkFluency()
{
var checkbox = document.getElementById('fluency');
if (checkbox.checked != true)
{
alert("you need to be fluent in English to apply for the job");
}
}
Here in the checkFluency() function , picked the checkbox and then if it is not checked an alert is shown saying “you need to be fluent in English to apply for the job”
Using jQuery
https://codepen.io/prasanthmj/pen/owwPzw/
We could have done the same thing using jQuery and in fact, that is what we are going to be doing next . jQuery is the most famous JS library ever created , and a lot of people use it daily as it makes their job a lot easier . You do not need to worry if you do not know jQuery , it’s concepts are very easy and I will be explaining everything as we go along.
I only added jQuery and couple of CSS lines to style our page. I also added the same exact HTML code we used in the previous code , the only difference will be in our javascript code since in this example we will be using jQuery instead of plain javascript.
<form action="">
<label for="name">Name:</label>
<input type="text" name="name"><br>
<label for="language">Do you speak English fluently?</label>
<input type="checkbox" name="fluency" id="fluency"checked/>
</form>
You may notice that the only thing I changed from the previous example is that I have deleted the onclick event in the checkbox which makes sense , since in jquery we will be attaching the event to the element no need to call it from the HTML code.
Now to the javascript code where all the magic happens :
$(document).ready(function()
{
$('#fluency').change(function()
{
if(this.checked != true)
{
alert('you need to be fluent in English to apply for the job');
}
});
});
If this seems overwhelming to you , no need to worry , I will be explaining everything in details. First, I am using the $(document).ready(); that I have told you about and inside it I added an anonymous function.
If you are not familiar with anonymous functions they are functions that are declared in runtime and the reason they are called anonymous is that you create them without giving them a name.
And inside the anonymous function I placed the following code :
$('#fluency').change(function()
{
if(this.checked != true)
{
alert('you need to be fluent in English to apply for the job');
}
});
First, we are using the dollar sign ‘$’ which is a shorthand for jQuery so this $(‘#fluency’) is the same exact thing as jQuery(‘#fluency’). Then we are attaching to it an on change event and inside it we are using the anonymous function syntax for the second time. The code that is inside the anonymous function will be run each time the event is fired.
if(this.checked != true)
{
alert('you need to be fluent in English to apply for the job');
}
This is the same exact if statement we used in the first example with only a very small change , which is instead of getting the checkbox using document.getElementById() we are using the “this” keyword. If you are not familiar with the ’this’ keyword , here in this example it refers to the target that fired that event which is here the checkbox we want to grab.
Submitting the form when checkbox is clicked
Sometimes you might want to submit the form just when the user clicks a checkbox, rather than making the user press the submit button. All what we will have to do is give an id to the form , I gave it an id of myform, then use jQuery to grab and submit the form.
$('#fluency').change(function()
{
if(this.checked == true)
{
$('#myform').submit();
}
}
Hide/show elements when checkbox is selected
https://codepen.io/prasanthmj/pen/vZZzaa/
I am sure most of you have seen a lot on the Internet which is when there is something hidden in the form , something like a section for extra information or feedback and you press on a checkbox to toggle it and show it or hide it . And this is what we will be building. We are going to be using jQuery because it will be much easier and shorter and I do not want you to get lost in a lot of lines but this example can be done with only javascript and it will not be hard .
<div>
<form action="">
<input type="text" name="name" placeholder="name">
<input type="email" name="email" placeholder="abcd@abcd.com" >
<label for="more-info">show more info</label>
<input id="more-info" name="more-info" type="checkbox">
<div id="conditional_part">
<textarea name="message" cols="30" rows="10"></textarea>
</div>
</form>
</div>
In the code above we have a div and inside it we have a form that contains a text with a placeholder text of name which will contain the name of the applicant , another input with type e-mail , checkbox and a textarea . When the checkbox is checked the textarea should appear so by default it should be hidden. So we make the container div (with id conditional_part) hidden
#conditional_part
{
display:none;
}
Next step is creating the javascript which is going to make this textarea appear and disappear .
The javascript for this example is pretty straight forward :
$('#more_info').change(function() {
if(this.checked != true){
$("#conditional_part").hide();
}
else{
$("#conditional_part").show();
}
});
Here, we are first grabbing the checkbox which we gave an id of more-info and attaching to it an onchange event that fires an anonymous function when the event is fired.
Inside this anonymous function we are having the same if statement we used in the previous example to check whether the checkbox is checked or not. And inside them we are using the jquery hide() and show() functions . These functions simply change the display type of the div (with id ‘conditional_part’) .