¿Cómo desmarcar un botón de opción usando JavaScript/jQuery?

Para desmarcar un botón de radio , hay muchos métodos disponibles, pero vamos a ver los métodos preferidos.

Ejemplo 1: este ejemplo desmarca el botón de opción mediante el uso de la propiedad marcada de Javascript . La propiedad marcada JavaScript Radio se usa para establecer o devolver el estado marcado de un botón de opción de entrada. Esta propiedad se utiliza para reflejar el atributo marcado de HTML.

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            JavaScript | uncheck a radio button
        </title> 
    </head> 
      
    <body style = "text-align:center;" id = "body"> 
          
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1> 
          
        <input id = "radio" type="radio" name="GFG"
                value="GeeksForGeeks" checked>GFG
                  
        <br><br>
          
        <button onclick = "gfg_Run()"> 
            uncheck
        </button>
          
        <p id="GFG_DOWN" style="color:green;font-size:20px;"></p>
          
        <script>
            var el_down = document.getElementById("GFG_DOWN");
              
            function gfg_Run() {
                var radioButton = document.getElementById("radio");
                radioButton.checked = false;
                el_down.innerHTML = "Unchecked";
            }
        </script> 
    </body> 
</html>                    

Producción:

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

Ejemplo 2: Este ejemplo desmarca el botón de opción usando el método jQuery prop() . El método prop() en jQuery que se usa para establecer o devolver las propiedades y valores de los elementos seleccionados.

<!DOCTYPE html>  
<html>  
    <head> 
        <title> 
            JQuery | Uncheck a radio button
        </title>
          
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    </head> 
      
    <body style = "text-align:center;" id = "body">  
          
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1> 
          
        <input id = "radio" type="radio" name="GFG" 
                value="GeeksForGeeks" checked>GFG
                  
        <br><br>
          
        <button onclick = "gfg_Run()"> 
            uncheck
        </button>
          
        <p id="GFG_DOWN" style="color:green;font-size:20px;"></p>
          
        <script>
            var el_down = document.getElementById("GFG_DOWN");
              
            function gfg_Run() {
                $("#radio").prop("checked", false);
                el_down.innerHTML = "Unchecked";
            }
        </script> 
    </body>  
</html>

Producción:

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

Publicación traducida automáticamente

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