Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use the JavaScript function in the check box?
While working with HTML checkboxes, developers often need to execute JavaScript functions based on user interactions. This allows for dynamic content updates, form validation, and conditional display of elements based on checkbox selections.
For example, you might have a checkbox asking "Are you above 18?" If users check this checkbox, you can show additional input fields like a PAN card number field. This requires calling JavaScript functions whenever users check or uncheck checkboxes.
Using the onchange Event
The onchange event attribute allows us to invoke a function whenever the user checks or unchecks a checkbox. This event fires when the checkbox value changes.
Syntax
<input type="checkbox" onchange="functionName()">
Example
In this example, we create a checkbox that asks if the user is above 18. Based on the checkbox state, we show or hide a PAN card input field using the checked property.
<html>
<body>
<h3>Using the onchange event to control checkbox behavior</h3>
<label for="check">Are you above 18?</label>
<input type="checkbox" id="check" value="18" onchange="showHidePan()">
<br><br>
<div id="pan-input" style="display: none;">
<label for="pan">Enter your PAN number:</label>
<input type="text" id="pan">
</div>
<script>
function showHidePan() {
let checkbox = document.getElementById('check');
let panInput = document.getElementById('pan-input');
if (checkbox.checked) {
panInput.style.display = "block";
} else {
panInput.style.display = "none";
}
}
</script>
</body>
</html>
Using the onclick Event
The onclick event triggers when a user clicks on the checkbox. This is another effective way to handle checkbox interactions and execute functions based on user clicks.
Syntax
<input type="checkbox" onclick="functionName()">
Example
This example shows two checkboxes for fruits and vegetables. Each checkbox controls the visibility of its corresponding list when clicked.
<html>
<body>
<h3>Using onclick event to show/hide content</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="fruits-div" style="display: none;">
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Guava</li>
<li>Grapes</li>
<li>Watermelon</li>
<li>Strawberry</li>
</ul>
</div>
<div id="vegetables-div" style="display: none;">
<ul>
<li>Cabbage</li>
<li>Celery</li>
<li>Carrot</li>
<li>Onion</li>
<li>Tomato</li>
<li>Potato</li>
</ul>
</div>
<script>
function showFruits() {
let fruit = document.getElementById('fruit');
let fruitsDiv = document.getElementById('fruits-div');
if (fruit.checked) {
fruitsDiv.style.display = "block";
} else {
fruitsDiv.style.display = "none";
}
}
function showVegetables() {
let vegetable = document.getElementById('vegetables');
let vegetablesDiv = document.getElementById('vegetables-div');
if (vegetable.checked) {
vegetablesDiv.style.display = "block";
} else {
vegetablesDiv.style.display = "none";
}
}
</script>
</body>
</html>
Using addEventListener Method
The addEventListener() method provides a more modern and flexible approach to handle checkbox events. It allows you to attach multiple event listeners to the same element and provides better separation of HTML and JavaScript.
Syntax
checkbox.addEventListener('change', function() {
// Perform actions based on checkbox state
});
Example
This example demonstrates using addEventListener() with the 'change' event to update content dynamically based on checkbox selection.
<html>
<body>
<h3>Using addEventListener() method for checkbox events</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 maleCheck = document.getElementById('male');
maleCheck.addEventListener('change', function() {
let textDiv = document.getElementById('text-div');
if (maleCheck.checked) {
textDiv.innerHTML = "You are a male.";
} else {
textDiv.innerHTML = "You are not a male.";
}
});
</script>
</body>
</html>
Comparison of Methods
| Method | HTML Integration | Multiple Listeners | Modern Practice |
|---|---|---|---|
onchange |
Inline HTML | No | Basic |
onclick |
Inline HTML | No | Basic |
addEventListener() |
Separate JavaScript | Yes | Recommended |
Conclusion
All three methods effectively handle checkbox interactions in JavaScript. While onchange and onclick are simple to implement, addEventListener() is the modern standard offering better code organization and flexibility for complex applications.
15K+ Views
