Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use the JavaScript function in the check box?
While working with the HTML checkboxes, sometimes developers may require to use the checkboxes to allow users to select multiple options. Also, developers need to perform some actions based on the selected checkbox.
For example, you have given the checkbox with a question like are you above 18? If users check this checkbox, only show the input to take a user’s pan card number. So, we need to call a function whenever the user checks and unchecks the checkboxes.
Use the onchange event
The onchange event attribute allows us to invoke a function whenever the user checks and unchecks the checkbox. We can pass the function invocation expression as a value of the onchange event attribute.
Syntax
Users can follow the syntax below to use the onchange event attribute to invoke a function.
<input type = "checkbox" onchange = "showHidePan()">
In the above syntax, we have defined the checkbox type input and used the showHidePan() function expression as a value of the onchange event attribute.
Example 1
In the example below, we created the checkbox input, which asks for users above 18. So, it shows that we can also use a checkbox to take the answer yes or no from the users.
Furthermore, whenever the checkbox value changes, we invoke a showHidePan() function. In the showHidePan() function, we used the ‘checked’ property of checkbox input to check whether the checkbox is checked or not, and based on that, we are showing the pan card number input div.
<html>
<body>
<h3>Using the <i> onchange event attribute </i> to invoke the particular function whenever the user checks and unchecks checkbox </h3>
<label for = "check"> Are you above 18? </label>
<input type = "checkbox" id = "check" value = "18" onchange = "showHidePan()"> <br><br>
<div id = "pan-input">
<label for = "pan"> Enter your pan number </label>
<input type = "text" id = "pan">
</div>
<script>
function showHidePan() {
let checkbox = document.getElementById('check');
let pan_input = document.getElementById('pan-input');
if (checkbox.checked) {
pan_input.style.display = "flex";
} else {
pan_input.style.display = "none";
}
}
</script>
</body>
</html>
Use the onclick event
Whenever we click on any element, the onclick event triggers that particular element. We can also use the onclick event with a checkbox. So, whenever the user checks or unchecks the checkbox, we can invoke any function using the onclick event attribute.
Syntax
Users can follow the syntax below to use the onclick event with checkbox input.
<input type = "checkbox" onclick = "function()">
In the above syntax, we have passed the function execution expression as a value of the onclick event attribute. The function is the name of the function to invoke when the user clicks the checkbox.
Example 2
In the example below, we have created two checkboxes; One is for fruits and another for vegetables. Users can select either any one or both checkboxes together.
When a user clicks the checkbox of fruits and vegetables, we invoke the showFruits() function and showVegetables() function, respectively. In the showFruits() and showVegetables() functions, we set the display of fruits and vegetable div based on whether the checkbox is checked.
<html>
<body>
<h3> Using the <i> onclick event attribute </i> to invoke the particular function whenever the user checks and unchecks checkbox </h3>
<label for = "fruit"> Fruits </label>
<input type = "checkbox" id = "fruit" onclick = "showFruits()">
<label for = "vegetables"> Vegetables </label>
<input type = "checkbox" id = "vegetables" onclick = "showVegetables()"> <br><br>
<div id = "vegetables-div">
<ul>
<li> Cabbage </li>
<li> Celery </li>
<li> Carrot </li>
<li> Onion </li>
<li> Tomato </li>
<li> Potato </li>
</ul>
</div>
<div id = "fruits-div">
<ul>
<li> Apple </li>
<li> Banana </li>
<li> Guavava </li>
<li> Graps </li>
<li> Watermelon </li>
<li> Strabary </li>
</ul>
</div>
<script>
function showFruits() {
let fruit = document.getElementById('fruit');
let fruits_div = document.getElementById('fruits-div');
if (fruit.checked) {
fruits_div.style.display = "flex";
} else {
fruits_div.style.display = "none";
}
}
function showVegetables() {
let vegeltable = document.getElementById('vegetables');
let vegeltables_div = document.getElementById('vegetables-div')
if (vegeltable.checked) {
vegeltables_div.style.display = "flex";
} else {
vegeltables_div.style.display = "none";
}
}
</script>
</body>
</html>
Use the addEventListner method
The addEventListner() method is used to listen to particular events on the webpage or HTML element. We can use the change or click event as a first parameter of the addEventListner() method to perform some action whenever users check and uncheck the checkbox.
Syntax
Users can follow the syntax below to use the addEventListner() method for checkboxes.
male_check.addEventListener('change', function () {
// perform some action based on the checkbox being checked or unchecked.
})
In the above syntax, we have passed the ‘change’ event as the first parameter and the callback function as a second parameter.
Example 3
The example below has a checkbox labelled ‘are you male?’. When a user checks or unchecks the checkbox, it will trigger a change event and performs an action defined in the callback function of the addEventListner() method.
In the callback function, we access the text_div by id and change its inner HTML.
<html>
<body>
<h3> Using the <i> addEventListner() method </i> to invoke the particular function whenever user checks and unchecks checkbox </h3>
<label for = "male"> Are you male? </label>
<input type = "checkbox" id = "male"> <br><br>
<div id = "text-div"> You are not a male. </div>
<script>
let male_check = document.getElementById('male');
male_check.addEventListener('change', function () {
let text_div = document.getElementById('text-div');
if (male_check.checked) {
text_div.innerHTML = "You are a male."
} else {
text_div.innerHTML = "You are not a male."
}
})
</script>
</body>
</html>
This tutorial taught us three approaches to using the function with a checkbox. All approaches perform the same task as invoking the function whenever the user checks or unchecks the checkbox.
8K+ Views
