Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Input Checkbox Property

  • Difficulty Level : Easy
  • Last Updated : 24 Jun, 2021
Geek Week

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: 
 

comcheckbox

After clicking the button: 
 

domcheckbox



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: 
 

domcheck

After clicking the button: 
 

domcheck

Supported Browsers: The browser supported by DOM Input Checkbox  property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :