jQuery vea si alguna o ninguna casilla está seleccionada

126

Sé cómo ver si una casilla de verificación individual está seleccionada o no.

Pero tengo problemas con lo siguiente: dado un identificador de formulario, necesito ver si alguna de las casillas de verificación está seleccionada (es decir, 1 o más), y necesito ver si ninguna está seleccionada. Básicamente necesito dos funciones separadas que respondan estas dos preguntas. La ayuda sería apreciada ¡Gracias!

En realidad, solo necesitaría una función para decirme si no hay ninguna seleccionada. Saber esto respondería la otra pregunta.

bba
fuente

Respuestas:

246

Puedes usar algo como esto

if ($("#formID input:checkbox:checked").length > 0)
{
    // any one is checked
}
else
{
   // none is checked
}
rahul
fuente
8
$("#formID input:checkbox:checked").lengthsería suficiente aquí también
Damon
@Damon, supongo que querías decir if ($("#formID input:checkbox:checked").length){}(sin el >0) sería suficiente porque 0 es un valor falso, ver james.padolsey.com/javascript/truthy-falsey
Adrien Be
11
jQuery dice sobre el :checkboxselector: For better performance in modern browsers, use [type="checkbox"]ver api.jquery.com/checkbox-selector - lo mismo para radiobuttons por cierto, use [type="radio"] rather than :radio api.jquery.com/radio-selector
Adrien Be
27

JQuery .isprobará todos los elementos especificados y devolverá verdadero si al menos uno de ellos coincide con el selector:

if ($(":checkbox[name='choices']", form).is(":checked"))
{
    // one or more checked
}
else
{
    // nothing checked
}
Michael Logutov
fuente
Aunque is()parece funcionar, tener :checkeddirectamente en el selector como se indica en la respuesta de @ rahul parece más apropiado. is () parece más útil cuando "dentro de devoluciones de llamada", consulte api.jquery.com/is . ¿O me estoy perdiendo algo?
Adrien Be
No, es más o menos lo que está escrito en los documentos: verifica si un elemento coincide con el atributo especificado. Aplicarlo como filtro y luego verificar si obtiene al menos un elemento en el resultado es el mismo, pero es más largo y no tan expresivo.
Michael Logutov
+1 por el hecho de que .is(":checked")en su solución es más expresivo, no estoy seguro del resto.
Adrien Be
A saber, $("form input[type=checkbox]").is(":checked")podría ser un enfoque más simple y más genérico.
Adrien Be
@AdrienBe Usar ispodría ser un mejor rendimiento, porque se detiene tan pronto como encuentra uno.
ChrisW
8

Puedes hacerlo:

  if ($('#form_id :checkbox:checked').length > 0){
    // one or more checkboxes are checked
  }
  else{
   // no checkboxes are checked
  }

Dónde:

  • :checkbox El selector de filtro selecciona todas las casillas de verificación.
  • :checked seleccionará casillas marcadas
  • length dará la cantidad de marcados allí
Sarfraz
fuente
jQuery dice sobre el :checkboxselector: For better performance in modern browsers, use [type="checkbox"]ver api.jquery.com/checkbox-selector
Adrien Be
6

Esto es lo que utilicé para verificar si alguna casilla de verificación en una lista de casillas de verificación había cambiado:

$('input[type="checkbox"]').change(function(){ 

        var itemName = $('select option:selected').text();  

         //Do something.

});     
James Drinkard
fuente
6

Sin usar 'length' puedes hacerlo así:

if ($('input[type=checkbox]').is(":checked")) {
      //any one is checked
}
else {
//none is checked
}
Acheme Paul
fuente
3

Puede hacer un simple retorno de .lengthaquí:

function areAnyChecked(formID) {
  return !!$('#'+formID+' input[type=checkbox]:checked').length;
}

Esta búsqueda de casillas de verificación en el formulario dado, ve si hay alguna :checkedy devuelve truesi son (ya que la longitud sería 0 de lo contrario). Para hacerlo un poco más claro, aquí está la versión convertida no booleana:

function howManyAreChecked(formID) {
  return $('#'+formID+' input[type=checkbox]:checked').length;
}

Esto devolvería un recuento de cuántos se verificaron.

Nick Craver
fuente
3

La respuesta de Rahul es la más adecuada para su pregunta. De todos modos, si tiene un grupo de casillas para marcar y no todas las casillas en su formulario, puede hacerlo.

Ponga un nombre de clase para todas las casillas de verificación que desea marcar, por ejemplo, un nombre de clase test_checky ahora puede verificar si alguna de las casillas de verificación está marcada como perteneciente al grupo:

$("#formID .test_check:checked").length > 0

Si regresa true, suponga que una o más casillas de verificación están marcadas con el nombre de clase test_checky ninguna marcada si devuelve false.

Espero que ayude a alguien. Gracias :)-

Rajesh Omanakuttan
fuente
1

Esta es la mejor manera de resolver este problema.

  if($("#checkbox").is(":checked")){

  // Do something here /////

  };
Asiamah Amos
fuente
Hola, bienvenido a StackOverflow. Quizás pueda describir su respuesta un poco más, ya que no es evidente por qué es la "mejor manera" de resolver el problema.
dddJewelsbbb