HTML | Casilla de verificación de entrada DOM marcada Propiedad

La propiedad de casilla de verificación de entrada DOM se utiliza para establecer o devolver el estado marcado de un campo de casilla de verificación. Esta propiedad se utiliza para reflejar el atributo HTML Checked.

Sintaxis:

  • Se utiliza para devolver la propiedad marcada.
    checkboxObject.checked
  • Se utiliza para establecer la propiedad marcada.
    checkboxObject.checked = true|false

Valores de propiedad:

  • verdadero: Define que la casilla de verificación está en estado marcado.
  • falso: especifica que la casilla de verificación no está marcada. Es falso por defecto.

Valor devuelto: Devuelve un valor booleano que representa si la casilla de verificación está marcada o no.

Ejemplo: Este ejemplo ilustra cómo devolver la propiedad Checkbox Checked.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>DOM Input Checkbox Checked Property</title>
    </head> 
    <body style = "text-align: center;"> 
        <h1 style = "color: green;">GeeksforGeeks</h1> 
        <h2>DOM Input Checkbox checked Property</h2> 
        <form > 
            <!-- Below input elements have attribute "checked" -->
            <input type="checkbox" name="check" id="GFG" 
                  value="1" checked>Checked by default<br> 
  
            <input type="checkbox" name="check" value="2">
                                Not checked by default<br> 
        </form> <br>
<button onclick="myGeeks()">Submit</button>
  <p id="sudo" style="color:green;font-size:20px;"></p>
        <script>
function myGeeks() {
  var g = document.getElementById("GFG").checked;
  document.getElementById("sudo").innerHTML = g;
}
</script>
    </body> 
</html>                     
                                             

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

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

Ejemplo-2: Este ejemplo ilustra cómo marcar y desmarcar la casilla de verificación.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>DOM Input Checkbox Checked Property</title>
    </head> 
    <body style = "text-align: center;"> 
        <h1 style = "color: green;">GeeksforGeeks</h1> 
        <h2>DOM Input Checkbox  checked Property</h2> 
        <form > 
            <!-- Below input elements have attribute "checked" -->
            <input type="checkbox" name="check" id="GFG" 
                           value="1">Checked by default<br> 
  
            <input type="checkbox" name="check" value="2">
                                 Not checked by default<br> 
        </form> <br>
     <button onclick="myGeeks()">checkt</button>
     <button onclick="Geeks()">Uncheck</button>
    
      <script>
        function myGeeks() {
           var g = document.getElementById("GFG").checked = true;
             }
        function Geeks() {
           var w = document.getElementById("GFG").checked = false;
         }
  
</script>
    </body> 
</html>                     
                                             

Producción :

Antes de hacer clic en el botón:

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

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

Navegadores compatibles: los navegadores compatibles con la propiedad de casilla de verificación de entrada DOM se enumeran a continuación:

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

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 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 *