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
HTML DOM Input Checkbox Object
The HTML DOM Input Checkbox Object represents an HTML input element with type "checkbox". It provides properties and methods to interact with checkbox elements programmatically, allowing you to get or set their state, value, and other attributes through JavaScript.
Syntax
Following is the syntax to create a checkbox element using JavaScript −
var checkboxObject = document.createElement("input");
checkboxObject.type = "checkbox";
To access an existing checkbox element −
var checkboxObject = document.getElementById("checkboxId");
// or
var checkboxObject = document.getElementsByName("checkboxName")[0];
Properties
The Input Checkbox Object has the following properties −
| Property | Description |
|---|---|
| autofocus | Sets or returns whether the checkbox should be focused when the page loads |
| checked | Sets or returns the checked state of the checkbox (true/false) |
| defaultChecked | Returns the default value of the checked attribute |
| defaultValue | Sets or returns the default value of the checkbox |
| disabled | Sets or returns whether the checkbox is disabled |
| form | Returns a reference to the form that contains the checkbox |
| indeterminate | Sets or returns the indeterminate state of the checkbox |
| name | Sets or returns the value of the name attribute |
| required | Sets or returns whether the checkbox must be checked before submitting the form |
| type | Returns the type of form element (always "checkbox") |
| value | Sets or returns the value of the value attribute |
Example − Checkbox Value Property
Following example demonstrates how to manipulate the value property of a checkbox −
<!DOCTYPE html>
<html>
<head>
<title>Value Attribute of Checkbox</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="Form">
<div>
Color-Red: <input value="Green" id="formCheckbox" type="checkbox" name="formCheckbox">
</div>
</form>
<button onclick="changeType()">Change value of input checkbox</button>
<div id="displayDiv"></div>
<script>
var valueOfInput = document.getElementById("formCheckbox");
var displayDiv = document.getElementById("displayDiv");
displayDiv.textContent = 'Value: ' + valueOfInput.value;
function changeType(){
if(valueOfInput.value == 'Green' && valueOfInput.checked == true){
valueOfInput.value = 'Red';
displayDiv.textContent = 'Value: ' + valueOfInput.value;
} else {
displayDiv.textContent = 'Check the checkbox to change value to red';
}
}
</script>
</body>
</html>
The output shows the initial value "Green", and when the checkbox is checked and button is clicked, the value changes to "Red" −
Initial: Value: Green After checking and clicking: Value: Red
Example − Checked Property
Following example shows how to use the checked property to determine and set the checkbox state −
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Checked Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Select your hobbies:</h3>
<label><input type="checkbox" id="reading" value="reading"> Reading</label><br>
<label><input type="checkbox" id="music" value="music"> Music</label><br>
<label><input type="checkbox" id="sports" value="sports"> Sports</label><br><br>
<button onclick="checkAll()">Select All</button>
<button onclick="uncheckAll()">Unselect All</button>
<button onclick="showSelected()">Show Selected</button>
<p id="result"></p>
<script>
function checkAll() {
document.getElementById("reading").checked = true;
document.getElementById("music").checked = true;
document.getElementById("sports").checked = true;
}
function uncheckAll() {
document.getElementById("reading").checked = false;
document.getElementById("music").checked = false;
document.getElementById("sports").checked = false;
}
function showSelected() {
var selected = [];
if (document.getElementById("reading").checked) selected.push("Reading");
if (document.getElementById("music").checked) selected.push("Music");
if (document.getElementById("sports").checked) selected.push("Sports");
document.getElementById("result").textContent =
"Selected hobbies: " + (selected.length > 0 ? selected.join(", ") : "None");
}
</script>
</body>
</html>
This example allows users to select multiple checkboxes and provides buttons to select all, unselect all, or display the selected options.
Select your hobbies: ? Reading ? Music ? Sports [Select All] [Unselect All] [Show Selected] Selected hobbies: Reading, Music
Example − Indeterminate State
Following example demonstrates the indeterminate property, useful for creating tri-state checkboxes −
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Indeterminate State</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Skills Assessment</h3>
<label><input type="checkbox" id="parentBox"> Programming Languages</label><br>
<div style="margin-left: 20px;">
<label><input type="checkbox" id="html" onchange="updateParent()"> HTML</label><br>
<label><input type="checkbox" id="css" onchange="updateParent()"> CSS</label><br>
<label><input type="checkbox" id="js" onchange="updateParent()"> JavaScript</label>
</div>
<script>
function updateParent() {
var html = document.getElementById("html").checked;
var css = document.getElementById("css").checked;
var js = document.getElementById("js").checked;
var parent = document.getElementById("parentBox");
var checkedCount = html + css + js;
if (checkedCount === 0) {
parent.checked = false;
parent.indeterminate = false;
} else if (checkedCount === 3) {
parent.checked = true;
parent.indeterminate = false;
} else {
parent.checked = false;
parent.indeterminate = true;
}
}
// Initialize indeterminate state
updateParent();
</script>
</body>
</html>
The parent checkbox shows three states: unchecked (none selected), indeterminate (some selected), and checked (all selected).
Skills Assessment ? Programming Languages (indeterminate when partially selected) ? HTML ? CSS ? JavaScript
Common Methods
The Input Checkbox Object also supports standard HTML DOM methods −
-
click()− Simulates a mouse click on the checkbox -
focus()− Gives focus to the checkbox -
blur()− Removes focus from the checkbox
Conclusion
The HTML DOM Input Checkbox Object provides comprehensive control over checkbox elements through JavaScript. Its properties like checked, value, and indeterminate enable dynamic form interactions, while methods allow programmatic manipulation of checkbox behavior. This makes it essential for creating interactive web forms and user interfaces.
504 Views
