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’:
- Al hacer clic en el botón ‘Obtener Premium’:
- Al hacer clic en el botón ‘Restablecer opciones’:
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’:
- Al hacer clic en el botón ‘Obtener Premium’:
- Al hacer clic en el botón ‘Restablecer opciones’:
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