Compruebe si la casilla de verificación está marcada con jQuery
-
Compruebe si la casilla de verificación está marcada con operaciones DOM directas utilizando el método
.get() -
Compruebe si la casilla de verificación está marcada con el método
.prop() -
Compruebe si la casilla de verificación está marcada con el método
.is() - Casos de uso comunes para verificar si la casilla de verificación está marcada con jQuery
Aprenderá varios métodos para marcar la casilla de jQuery en esta publicación de blog. También analizaremos sus métricas de rendimiento para permitirle elegir el mejor método para cada caso de uso.
Mostraremos atajos útiles para casos de uso comunes de casillas de verificación. También tenemos una trampa para un error común que comete la gente.
Compruebe si la casilla de verificación está marcada con operaciones DOM directas utilizando el método .get()
jQuery nos permite acceder al nodo DOM debajo de cada objeto jQuery con el método .get(). Luego podemos consultar este nodo DOM para acceder directamente/establecer diferentes propiedades.
$("button").on("click",function(){
$("p").html(`<p>
${$("input[name='checkboxArray']").get(0).checked?'The first box is checked':'The first box is not checked'}
// <p/>`);
});
Puede ver la demostración de trabajo de este código a continuación.
Analicemos este código. (Consulte los archivos HTML y CSS adjuntos para comprender mejor el código).
Seleccionamos un botón para activar el evento de verificación y le adjuntamos una devolución de llamada en el evento clic. En la devolución de llamada, mostramos el resultado de la verificación agregándolo como texto a un elemento p; usamos el método jQuery .html().
Tenga en cuenta que este método jQuery sobrescribe el texto anterior, que es nuestro caso de uso deseado aquí. Queremos una salida HTML nueva para cada nuevo cheque.
La principal lógica de comprobación está en la línea que le pasamos al método .html(). Primero seleccionamos todos los elementos de entrada con name = 'checkboxArray' en un objeto jQuery.
Tenga en cuenta que el selector solo devuelve un objeto jQuery y aún no tenemos acceso al nodo DOM subyacente.
Pero luego encadenamos el método .get, así - .get(0). Ahora tenemos acceso al primer nodo DOM en la colección seleccionada de jQuery.
Comprobaremos si la primera casilla de verificación está marcada, y así accederemos al primer nodo DOM pasando 0 como argumento al método .get().
Ahora podemos acceder directamente a la propiedad .checked de jQuery para verificar si la casilla de verificación está seleccionada.
Consejo profesional 1:
La propiedad .checked a la que accedemos arriba es la propiedad JavaScript adjunta al nodo DOM (o, técnicamente, la propiedad IDL). Es diferente del atributo HTML marcado que solo muestra el valor marcado/no marcado inicial o predeterminado del elemento HTML (técnicamente, la propiedad de contenido HTML).
Veremos esta diferencia en detalle más adelante en esta publicación de blog.
Consejo profesional 2:
Las operaciones DOM directas son súper rápidas. Entonces, este método permite usar jQuery para verificar si la casilla de verificación está marcada con un rendimiento superior.
Acceso directo Comprobar si la casilla de verificación está marcada con operaciones DOM directas utilizando el operador de desreferenciación
Cada jQuery se comporta como un objeto de matriz. Por lo tanto, podemos aferrarnos a este comportamiento y reducir parte del código utilizando el operador de desreferenciación de matriz corta [] en lugar del método .get.
$("button").on("click",function(){
$("p").html(`<p>
// ${$("input[name='checkboxArray']")[0].checked?'The first box is checked':'The first box is not checked'}
// <p/>`);
});
El código es el mismo que el anterior excepto por el uso del operador de desreferenciación: ... $("input[name = 'checkboxArray']")[0]... .
Compruebe si la casilla de verificación está marcada con el método .prop()
También podemos usar el método jQuery .prop() para extraer las propiedades subyacentes de JavaScript de los elementos en lugar de acceder directamente al nodo DOM.
$("button").on("click",function(){
$("p").html(`<p>
${$("input[name='checkboxArray']").prop('checked')?'The first box is checked':'The first box is not checked'}
<p/>`);
});
Puede ver la demostración de trabajo de este código a continuación.
La mayor parte del código es similar al anterior. Veamos la línea con la diferencia clave, es decir:
$("input[name='checkboxArray']").prop('checked')...
Extraemos la misma propiedad .checked anterior, pero usamos el método jQuery .prop() aquí.
Consejo profesional:
¿Por qué usar el método jQuery .prop()? El método jQuery .prop() también es una operación rápida (en comparación con el método basado en selector que vemos a continuación).
Es una buena práctica consultar las propiedades de los elementos DOM con JavaScript o bibliotecas basadas en JS como jQuery.
Compruebe si la casilla de verificación está marcada con el método .is()
Combinamos el selector :checked con el método .is() para usar jQuery para verificar si la casilla de verificación está marcada.
El selector :checked devuelve todos los elementos seleccionados o marcados. Para las casillas de verificación, significa que selecciona las casillas que están marcadas.
$("some selector:checked");
// returns those elements that are checked
Puede leer más sobre el selector :checked aquí.
El método .is() compara un objeto jQuery con un selector y devuelve verdadero si coincide con ese selector.
$("some jQuery object").is("some_selector");
//returns true if the jQuery object matches the selector
Puede leer más sobre el método .is() aquí.
Combinemos los dos en un solo código para verificar si la casilla de verificación está marcada con jQuery.
$("button").on("click",function(){
$("p").html(`<p>
${$("input[id='#first']").is(":checked")?'The first box is checked':'The first box is not checked'}
<p/>`);
});
Vea la demostración de este método a continuación.
El código para configurar el controlador de eventos y la devolución de llamada es similar a los métodos anteriores. El principal cambio está en la implementación del cheque, así:
$("input[id = '#first']").is(":checked")...
El método .is() devuelve verdadero si la casilla de verificación con el primer id está marcada porque le pasamos el selector :checked como argumento.
Consejo profesional:
El método is() no crea un nuevo objeto jQuery ni modifica el objeto original en su lugar. Este comportamiento lo hace ideal para usar en devoluciones de llamadas y controladores de eventos.
Casos de uso comunes para verificar si la casilla de verificación está marcada con jQuery
Ahora que hemos visto los métodos básicos, construyamos algunos scripts rápidos listos para usar para casos de uso común.
Verifique si la casilla de verificación está marcada usando la ID del elemento
Podemos realizar la comprobación utilizando el ID del elemento con el siguiente código:
$("button").on("click",function(){
$("p").html(`<p>
${$("input[id='#second']").is(":checked")?'The second box is checked':'The secong box is not checked'}
<p/>`);
});
Seleccionamos el checkbox con el ID second usando el atributo equals selector, pasando la opción id='#second'.
Puede ver la demostración de trabajo a continuación.
Compruebe si la casilla de verificación está marcada usando la clase
También podemos seleccionar un grupo de casillas de verificación con una clase común para ver si están marcadas. El código es bastante sencillo:
$("button").on("click",function(){
$("p").html(' ');
$("input[class='non-first']").each(function(){
$("p").append(`
${$(this).is(":checked")? 'The ' + $(this).attr("id") + ' box is checked':'The ' + $(this).attr("id") +' box is not checked'}
<br> `);
});
});
Seleccionamos todas las casillas de verificación con la clase que no es primera y luego iteramos sobre cada una de ellas con el método .each(). Finalmente, ejecutamos la verificación para cada iteración y agregamos la salida al elemento p.
Tenga en cuenta que usamos el método append() para este caso de uso, ya que no queremos sobrescribir el resultado de la iteración anterior.
Puede ver la demostración de trabajo a continuación:
Desmarque la casilla de verificación si está marcado con jQuery
Usamos el siguiente fragmento para desmarcar una casilla de verificación si está marcada con jQuery:
$("button").on("click",function(){
// To find the checked boxes by ID
let $checkedBox = $("input[id ='first']");
// To run the check and toggle if the checkbox is checked
if ($checkedBox.is(':checked')){
$checkedBox.prop("checked", false);
}
});
Usamos la forma set del método .prop() aquí.
$(some_jQuery_object).prop("checked",false);
// sets the "checked" property to false for the selected jQuery object
Puede ver la demostración de trabajo de este fragmento aquí:
Compruebe si todas las casillas de verificación están marcadas con jQuery
Podemos usar el siguiente modelo para encontrar si todas las casillas de verificación en una colección determinada están marcadas.
$("button").on("click",function(){
let result = true;
// To find the list of checked boxes in an array of related checkboxes
let $checkedList = $("input[name='checkboxArray']");
// To iterate and do something with each checked box on the list above
// Here we display info related to them in the DOM
$checkedList.each(function(){
if (!($(this).is(":checked"))){
result = false;
}
});
// to display the number of checked boxes
$("p").html(`All checkboxes are ${result?'':'not'} checked`);
});
Puede ver la demostración de trabajo del fragmento aquí:
Analicemos la lógica de este código.
Adjuntamos el controlador de eventos como arriba e iteramos sobre cada casilla marcada en la colección. Luego ejecutamos la función .each() en cada casilla de verificación y cambiamos la variable resultado a falso si alguna casilla de verificación no está marcada.
Finalmente, mostramos el resultado.
Compruebe si alguna casilla de verificación está marcada en la colección dada con jQuery
Podemos verificar si al menos una de las casillas de verificación está marcada con el siguiente código:
$("button").on("click",function(){
let result = false;
// To find the list of checked boxes in an array of related checkboxes
let $checkedList = $("input[name='checkboxArray']");
// To iterate and do something with each checked box on the list above
// Here we display info related to them in the DOM
$checkedList.each(function(){
if ($(this).is(":checked")){
result = true;
}
});
// to display if any (at least) one of the checkboxes is checked
$("p").html(`At least one checkbox in the given collection is ${result?'':'not'} checked`);
});
Primero veamos el método en acción con la demostración de trabajo a continuación.
La lógica es simple. Ejecutamos la verificación en cada casilla de verificación de la colección y cambiamos la variable resultado a verdadero si incluso una de las casillas de verificación está marcada.
De lo contrario, mantenemos el valor de la variable resultado en falso y enviamos el mensaje en consecuencia.
Deshabilite el botón Enviar si la casilla de verificación no está marcada con jQuery
Podemos escribir un fragmento simple para deshabilitar un botón de envío si una casilla de verificación específica no está marcada.
$("button").on("click",function(){
// To find the specific checkbox
let $checkedBox = $("input[id='third']");
let $submitBtn = $("input[name='submitBtn']");
if ($($checkedBox).is(":checked")){
$submitBtn.prop("disabled",false);
}
else {
$submitBtn.prop("disabled",true);
}
});
Puede ver el resultado de esta solución a continuación:
La lógica es simple. Determinamos si la casilla de verificación está marcada con el método .is() y el selector :checked, al igual que nuestros métodos anteriores.
Si la casilla de verificación está marcada, establecemos la propiedad deshabilitada del elemento submitBtn en falso; de lo contrario, lo establecemos en verdadero.
Uso obsoleto del método .attr() para verificar si la casilla de verificación está marcada con jQuery
Los atributos HTML son diferentes de las propiedades DOM. Muchas veces, las propiedades coinciden con el atributo HTML, pero no siempre.
Al igual que en el caso de las casillas de verificación, el atributo HTML marcado es solo el indicador del estado predeterminado o inicial marcado/no marcado del elemento. No se corresponde con la propiedad DOM marcada, que muestra el estado actual marcado/no marcado del elemento.
El método jQuery .attr() solo hace referencia a atributos HTML. Por lo tanto, no debe usar este método para encontrar si la casilla de verificación está seleccionada.
Podría hacer esto con jQuery antes, pero el comportamiento cambió en la versión 1.6 cuando se agregó el método .prop() para acceder a las propiedades DOM explícitamente y .attr() se restringió solo a los atributos HTML.
Puede leer, en detalle, sobre cómo jQuery maneja los atributos y las propiedades de manera diferente aquí.