¿Cómo marcar una casilla de verificación con jQuery?

Hay dos métodos mediante los cuales puede marcar dinámicamente la casilla de verificación seleccionada actualmente cambiando la propiedad marcada del tipo de entrada.

Método 1: Usar el método prop : Se puede acceder a la entrada y se puede establecer su propiedad usando 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 checkbox with jQuery?
    </title>
  
    <script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green"> 
          GeeksforGeeks 
        </h1>
  
        <b> 
          jQuery Check/Uncheck Checkbox
        </b>
  
        <p>
            <input type="checkbox" name="option" id="front"> 
            Front-End
  
            <input type="checkbox" name="option" id="back">
            Back-End
        </p>
  
        <p>
            <button type="button" class="check-front">
                Subscribe Front-End
            </button>
  
            <button type="button" class="check-back">
                Subscribe Back-End
            </button>
  
            <button type="button" class="reset">
                Reset 
            </button>
        </p>
  
        <script type="text/javascript">
            $(document).ready(function() {
                $(".check-front").click(function() {
                    $("#front").prop("checked", true);
                });
                $(".check-back").click(function() {
                    $("#back").prop("checked", true);
                });
                $(".reset").click(function() {
                    $("#front").prop("checked", false);
                    $("#back").prop("checked", false);
                });
  
            });
        </script>
    </center>
</body>
  
</html>

Producción:

  • Antes de hacer clic en cualquier botón:
  • Haciendo clic en el botón:
  • Al hacer clic en el botón ‘Restablecer’:

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 checkbox with jQuery?
    </title>
  
    <script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green"> 
        GeeksforGeeks 
    </h1>
  
        <b> 
        jQuery Check/Uncheck Checkbox
    </b>
  
        <p>
            <input type="checkbox" name="option" id="Front"> 
            Front-End
  
            <input type="checkbox" name="option" id="Back"> 
            Back-End
        </p>
  
        <p>
            <button type="button" class="check-Front">
                Subscribe Front-End
            </button>
  
            <button type="button" class="check-Back">
                Subscribe Back-End
            </button>
  
            <button type="button" class="reset">
                Reset 
            </button>
        </p>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".check-Front").click(function() {
                    $("#Front").attr("checked", true);
  
                });
                $(".check-Back").click(function() {
                    $("#Back").attr("checked", true);
                });
                $(".reset").click(function() {
                    $("#Front").attr("checked", false);
                    $("#Back").attr("checked", false);
                });
            });
        </script>
    </center>
</body>
  
</html>

Producción:

  • Antes de hacer clic en cualquier botón:
  • Haciendo clic en el botón:
  • Al hacer clic en el botón ‘Restablecer’:

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 SHUBHAMSINGH10 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 *