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:
Después de hacer clic en el botón:
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:
Después de hacer clic en el botón:
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