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
Selected Reading
Checking a Checkbox with JavaScript
In JavaScript, you can programmatically check a checkbox by setting its checked property to true. This is useful for form validation, user interactions, or initializing form states.
HTML Structure
First, let's look at a basic checkbox structure:
<label>John</label> <input id="checkedValue1" type="checkbox"> <label>David</label> <input id="checkedValue2" type="checkbox">
Using the checked Property
The checked property is a boolean that determines whether a checkbox is selected. Set it to true to check the checkbox, or false to uncheck it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Example</title>
</head>
<body>
<label>John</label>
<input id="checkedValue1" type="checkbox">
<br><br>
<label>David</label>
<input id="checkedValue2" type="checkbox">
<br><br>
<button onclick="checkDavid()">Check David</button>
<button onclick="uncheckDavid()">Uncheck David</button>
<script>
// Automatically check David's checkbox on page load
document.querySelector('#checkedValue2').checked = true;
function checkDavid() {
document.querySelector('#checkedValue2').checked = true;
}
function uncheckDavid() {
document.querySelector('#checkedValue2').checked = false;
}
</script>
</body>
</html>
Multiple Ways to Check Checkboxes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Methods</title>
</head>
<body>
<input id="checkbox1" type="checkbox"> Method 1
<br>
<input id="checkbox2" type="checkbox"> Method 2
<br>
<input id="checkbox3" type="checkbox"> Method 3
<br><br>
<button onclick="demonstrateMethods()">Check All</button>
<script>
function demonstrateMethods() {
// Method 1: Using querySelector
document.querySelector('#checkbox1').checked = true;
// Method 2: Using getElementById
document.getElementById('checkbox2').checked = true;
// Method 3: Using setAttribute
document.getElementById('checkbox3').setAttribute('checked', 'checked');
}
</script>
</body>
</html>
Checking Status of Checkbox
You can also read the current state of a checkbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check Status</title>
</head>
<body>
<input id="statusCheckbox" type="checkbox"> Click me
<br><br>
<button onclick="checkStatus()">Check Status</button>
<p id="status"></p>
<script>
function checkStatus() {
const checkbox = document.querySelector('#statusCheckbox');
const statusText = checkbox.checked ? 'Checked' : 'Unchecked';
document.getElementById('status').textContent = 'Status: ' + statusText;
}
</script>
</body>
</html>
Key Points
- Use
element.checked = trueto check a checkbox - Use
element.checked = falseto uncheck a checkbox - The
checkedproperty returns a boolean value - You can use
querySelector()orgetElementById()to select checkboxes
Conclusion
Checking checkboxes with JavaScript is straightforward using the checked property. This technique is essential for creating dynamic forms and interactive web applications.
Updated on: 2026-03-15T23:19:00+05:30
606 Views
Advertisements