Skip to content
Related Articles

Related Articles

HTML | DOM Input Checkbox Property
  • Difficulty Level : Easy
  • Last Updated : 07 Jan, 2019

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :