HTML | DOM Input Checkbox Property

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before clicking the button:
domcheck
After clicking the button:
domcheck



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.