HTML | Objeto de casilla de verificación de entrada DOM

El objeto de casilla de verificación de entrada en HTML representa una casilla de verificación en un formulario HTML. 
Para cada instancia de un elemento <input type = “checkbox”> en un formulario HTML, se crea un objeto de casilla de verificación. Para acceder al objeto de la casilla de verificación, utilice la indexación de la array de elementos del formulario correspondiente o utilice getElementById();
Creación de un objeto de casilla de verificación : podemos crear un objeto de casilla de verificación a través de javascript. Para crear el elemento <input type = “checkbox”> utilice el método document.createElement(). Después de la creación, use el método appendChild() para agregarlo al elemento en particular (como div) para mostrarlo.
Ejemplo: 
 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM Input Checkbox object
        </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>

Salida:  
Antes de hacer clic en el botón: 
 

comcheckbox

Después de hacer clic en el botón: 
 

domcheckbox

Acceso al objeto de casilla de verificación: podemos acceder al objeto de casilla de verificación utilizando el método getElementById(). Coloque la identificación del elemento de la casilla de verificación en getElementById() para acceder a él. 
Ejemplo: 
 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM Input Checkbox object
        </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>

Salida:  
Antes de hacer clic en el botón: 
 

domcheck

Después de hacer clic en el botón: 
 

domcheck

Navegadores compatibles : los navegadores compatibles con el objeto DOM Input Checkbox se enumeran a continuación:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *