Recorrer inputs dentro de un div

[Alexis88]

Supongamos que tenemos una estructura así:

Código HTML:

<div class = "noticia">
    <input type = "checkbox" name = "foo" /> Foo
    <input type = "checkbox" name = "bar" /> Bar
    <input type = "checkbox" name = "bin" /> Bin
    <input type = "checkbox" name = "baz" /> Baz
</div>
 

Para saber cuáles son los checkbox que están marcados y cuáles no lo están, basta con hacer lo siguiente:

Código Javascript:

var contenido, mensaje;
$("#check").on("click", function(){
    $("#out").html(null);
    $(".noticia :checkbox").each(function(){
        contenido = $("#out").html();
        mensaje = this.checked ? 
                  "El checkbox " + this.name + " se encuentra marcado.<br />" : 
                  "El checkbox " + this.name + " no se encuentra marcado.<br />";
        $("#out").html(contenido + mensaje);
    });
});
 

En donde $("#check") es un botón al cual le daré un clic para realizar la comprobación, mientras que $("#out"), es un <div> (o cualquier otro elemento contenedor) en el que iré añadiendo los estados de cada checkbox.

El asunto es simple. Al dar clic al botón de comprobación, tomo a todos los elementos de tipo checkbox contenidos en cada elemento de clase "noticia" e itero al conjunto resultante. En cada iteración, compruebo si el checkbox actual en la iteración se encuentra marcado, de ser así, muestro un mensaje informando al usuario que el actual checkbox está marcado. El mensaje indicará lo contrario cuando el checkbox no esté marcado.

Solo como acotación, los mensajes no necesariamente tienes que mostrarlos en un contenedor, puedes usar la consola, así como mensajes de alerta o lo que creas conveniente.



Y antes de que me lo preguntes solo por si a caso, esto:

Código Javascript:

mensaje = this.checked ? 
          "El checkbox " + this.name + " se encuentra marcado.<br />" : 
          "El checkbox " + this.name + " no se encuentra marcado.<br />";
 

Equivale a esto:

Código Javascript:

if (this.checked){
    mensaje = "El checkbox " + this.name + " se encuentra marcado.<br />";
}
else{
    mensaje = "El checkbox " + this.name + " no se encuentra marcado.<br />";
}
 

Saludos