Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
HTML | DOM Input Checkbox Object
The input checkbox object in HTML represents a checkbox in an HTML form.
For each instance of an <input type = “checkbox”> element in an HTML form, a checkbox object is created. To access the checkbox object use indexing the elements array of corresponding form or by using getElementById();
Creating checkbox object: We can create checkbox object through javascript. To create <input type = “checkbox”> element use document.createElement() method. After creation use the appendChild() method to append it to the particular element (such as div) to display it.
Example:
html
<!DOCTYPE html><html> <head> <title> DOM Input Checkbox Property </title> </head> <body style = "text-align: center;"> <h1 style = "color:green;"> GeeksforGeeks </h1> <h2> DOM Input Checkbox Property </h2> <p>Click the button to create a checkbox.</p> <button onclick="geek()">Click me!</button> <br> <div id = "myDiv"></div> <script> function geek() { var myDiv = document.getElementById("myDiv"); // creating checkbox element var checkbox = document.createElement('input'); // Assigning the attributes // to created checkbox checkbox.type = "checkbox"; checkbox.name = "name"; checkbox.value = "value"; checkbox.id = "id"; // creating label for checkbox var label = document.createElement('label'); // assigning attributes for // the created label tag label.htmlFor = "id"; // appending the created text to // the created label tag label.appendChild(document.createTextNode('This is the label for checkbox.')); // appending the checkbox // and label to div myDiv.appendChild(checkbox); myDiv.appendChild(label); } </script> </body></html> |
Output:
Before clicking the button:
After clicking the button:
Accessing checkbox object: We can access the checkbox object by using the getElementById() method. Put the id of the checkbox element in the getElementById() to access it.
Example:
html
<!DOCTYPE html><html> <head> <title> DOM Input Checkbox Property </title> </head> <body style = "text-align: center;"> <h1 style = "color:green;"> GeeksforGeeks </h1> <h2> DOM Input Checkbox Property </h2> <p>Click the button to check the checkbox.</p> <button onclick="myFunction()">Click me!</button> <br> Checkbox: <input type="checkbox" id="check"> <script> function myFunction() { // fetching the checkbox by id var doc = document.getElementById("check"); // changing the state of checkbox to checked doc.checked = true; } </script> </body></html> |
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by DOM Input Checkbox property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
.png)
