Marque todas las casillas de verificación en la carga de la página con jQuery

Question

En la carga de la página, con jQuery ¿cómo puedo seleccionar todas las casillas de verificación en un div específico automáticamente?

Answer 1

$(function(){ 
    $('#thediv input:checkbox').attr('checked', 'checked'); 
}); 

Answer 2

Lo redquare tiene va a funcionar, pero es una idea general de usar true/false con ellos ya que es la forma en que están normalizados, aquí hay algunos ejemplos de por qué esto es un hábito muy útil para seguir. Por ejemplo:

$('#myDiv :checkbox').attr('checked', 'checked'); 
alert($('#myDiv :checkbox').attr('checked')); //this alerts true, not "checked" 

You can test this here

En cambio, tener el hábito de pasar un valor lógico, que es mucho más versátil, por ejemplo:

$(function() { 
    $('#myDiv :checkbox').attr('checked', true); 
}); 

Esto permite mucha más flexibilidad en Por ejemplo, un código más breve, por ejemplo, dice que teníamos una casilla de verificación "Comprobar todo" en la parte superior, ¿cómo se vería eso?

$('#checkAll').change(function() { 
    if(this.checked) { 
    $('#subTable :checkbox').attr('checked', 'checked'); 
    } else { 
    $('#subTable :checkbox').removeAttr('checked', 'checked'); 
    } 
}); 

Ahora hemos tenido que traer una nueva función para hacer el trabajo, .removeAttr(). Para ser justos, this is even how the jQuery documentation does it in the example. Sin embargo, se puede cortar que en gran manera si se toma ventaja de la normalización jQuery hace internamente, así:

$('#checkAll').change(function() { 
    $('#subTable :checkbox').attr('checked', this.checked); 
}); 

---

Esto es algo a tener en cuenta al código, las mismas reglas Appy a .attr('disabled') . Hay otras áreas donde también ocurre la normalización ... probablemente los eventos sean los más extensos, si tiene curiosidad you can see that here, ya está hecho para usted, úselo :)

Answer 3

La gente parece realmente confundida acerca de cómo hacerlo esto en jQuery. Verificar una casilla de verificación es mucho más fácil y más eficiente sin ella. Los siguientes usos puntos fuertes de la selección y la iteración en una lista de nodos combinados con de jQuery el no podía-ser-más simple DOM checked propiedad de elementos de casillas de verificación:

$("#myDiv input:checkbox").each(function() { 
    this.checked = true; 
}); 

No es demasiado difícil de cortar jQuery en total en este caso :

var div = document.getElementById("myDiv"); 
var inputs = div.getElementsByTagName("input"); 
for (var i = 0, len = inputs.length; i < len; ++i) { 
    if (inputs[i].type == "checkbox") { 
     inputs[i].checked = true; 
    } 
} 

ACTUALIZACIÓN

Desde el lanzamiento de jQuery 1.6 y prop(), hay una manera sensata de hacer esto en jQuery:

$("#myDiv input:checkbox").prop("checked", true); 

Answer 4

Esto es trabajo en firefox v.17.01. Aún no lo he probado en otros navegadores.

// Seleccionar casillas de verificación y comprobación de la carga

$('#enable, #enable1, #enable2, #enable3').attr('checked', 'checked'); 

Vea el ejemplo:

JS FIDDLE