¿Cómo verificar un botón de radio con jQuery?

Hay dos métodos por los cuales uno puede cambiar dinámicamente el botón de opción actualmente seleccionado cambiando la propiedad marcada del tipo de entrada.

Método 1: Uso del método prop : se puede acceder a la entrada y se puede establecer su propiedad mediante el método prop. Este método manipula la propiedad ‘marcada’ y la establece en verdadero o falso dependiendo de si queremos marcarla o desmarcarla.

Sintaxis:

$("element").prop("checked", true)

Ejemplo:

<!DOCTYPE html>
<head>
    <title>
        How to check a radio button
        with jQuery?
    </title>
      
    <script src=
        "https://code.jquery.com/jquery-2.2.4.min.js">
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        jQuery Check/Uncheck Radio Button
    </b>
      
    <p>
        <input type="radio" name="option" id="free">
            Free Membership
              
        <input type="radio" name="option" id="premium">
            Premium Membership
    </p>
      
    <p>
        <button type="button" class="check-free">
            Get Free
        </button>
          
        <button type="button" class="check-premium">
            Get Premium
        </button>
          
        <button type="button" class="reset">
            Reset options
        </button>
    </p>
      
    <script type="text/javascript">
        $(document).ready(function () {
            $(".check-free").click(function () {
                $("#free").prop("checked", true);
            });
            $(".check-premium").click(function () {
                $("#premium").prop("checked", true);
            });
            $(".reset").click(function () {
                $("#free").prop("checked", false);
                $("#premium").prop("checked", false);
            });
        });
    </script>
</body>
  
</html>                    

Producción:

  • Al hacer clic en el botón ‘Obtener gratis’:
    chequeado gratis
  • Al hacer clic en el botón ‘Obtener Premium’:
    chequeado premium
  • Al hacer clic en el botón ‘Restablecer opciones’:
    resetear todo

Método 2: usar el método attr : es similar al método anterior y más adecuado para versiones anteriores de jQuery. Se puede acceder a la entrada y se puede establecer su propiedad utilizando el método attr. Tenemos que manipular la propiedad ‘marcada’ y establecerla en verdadero o falso dependiendo de si queremos marcarla o desmarcarla.

Nota: es necesario agregar un método de clic al establecer el atributo en ‘verdadero’ para asegurarse de que la opción se actualice en el grupo de opciones.

Sintaxis:

$("element").attr("checked", true)

Ejemplo:

<!DOCTYPE html>
<head>
    <title>
        How to check a radio
        button with jQuery?
    </title>
      
    <script src=
        "https://code.jquery.com/jquery-2.2.4.min.js">
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
    <b>jQuery Check/Uncheck Radio Button</b>
    <p>
        <input type="radio" name="option" id="free">
            Free Membership
        <input type="radio" name="option" id="premium">
            Premium Membership
    </p>
      
    <p>
        <button type="button" class="check-free">
            Get Free
        </button>
          
        <button type="button" class="check-premium">
            Get Premium
        </button>
          
        <button type="button" class="reset">
            Reset options
        </button>
    </p>
      
    <script type="text/javascript">
        $(document).ready(function () {
            $(".check-free").click(function () {
                $("#free").attr("checked", true).click();
            });
            $(".check-premium").click(function () {
                $("#premium").attr("checked", true).click();
            });
            $(".reset").click(function () {
                $("#free").attr("checked", false);
                $("#premium").attr("checked", false);
            });
        });
    </script>
</body>
  
</html>                    

Producción:

  • Al hacer clic en el botón ‘Obtener gratis’:
    chequeado gratis
  • Al hacer clic en el botón ‘Obtener Premium’:
    chequeado premium
  • Al hacer clic en el botón ‘Restablecer opciones’:
    resetear todo

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

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