Recorra las casillas de verificación y cuente cada una marcada o sin marcar


82

Me he encontrado con un pequeño problema. He aquí una breve explicación.

Tengo 12 casillas de verificación en un formulario estándar. Lo que tengo que hacer es recorrer cada uno de ellos y saber cuáles están marcados y cuáles no.

Usando esto, puedo construir una cadena que luego ingreso en un campo de base de datos. Aquí hay un ejemplo.

(Comprobación 1 - comprobado)
(Comprobación 2 - no comprobado)
(Comprobación 3 - comprobado)

1,0,1

Hasta ahora, tengo este fragmento de código.

$('input[type=checkbox]').each(function () {
           if (this.checked) {
               console.log($(this).val()); 
           }
});

Funciona perfectamente excepto que solo recupera los marcados, no todos.

Perdón por la nueva pregunta. Soy un poco nuevo en jquery.


5
Debería rediseñar el esquema de su base de datos.
SLaks

¿Rediseñar cómo? ¿No es mejor almacenar un grupo de casillas de verificación en un campo que tener un campo para cada casilla de verificación?
Richard M

4
Obviamente, esto depende de las casillas de verificación, pero probablemente debería usar campos individuales o una tabla secundaria (con un campo por fila por casilla de verificación [marcada])
SLaks

"¿No es mejor almacenar un grupo de casillas de verificación en un campo que tener un campo para cada casilla de verificación?" No, porque sus unos y ceros no se almacenan como bits, se almacenan como bytes. Si su razón para almacenar una lista de bits con valores separados por comas en un campo es por eficiencia, entonces pierda la coma y utilice operaciones de máscara y bit a bit . Aunque, en estos días, mysql ha implementado el tipo de datos de bits, por lo que el bit a bit y la máscara pueden no ser necesarios, a menos que esté programando chips de tarjetas de crédito o necesite algo absolutamente increíblemente rápido.
Blue Water

Respuestas:


126

Para crear una cadena de resultados exactamente en el formato que muestra, puede usar esto:

var sList = "";
$('input[type=checkbox]').each(function () {
    sList += "(" + $(this).val() + "-" + (this.checked ? "checked" : "not checked") + ")";
});
console.log (sList);

Sin embargo, estoy de acuerdo con @SLaks, creo que debería reconsiderar la estructura en la que almacenará esto en su base de datos.

EDITAR : Lo siento, leí mal el formato de salida que estaba buscando. Aquí hay una actualización:

var sList = "";
$('input[type=checkbox]').each(function () {
    var sThisVal = (this.checked ? "1" : "0");
    sList += (sList=="" ? sThisVal : "," + sThisVal);
});
console.log (sList);

1
Según tengo entendido, quiere una cuerda en 1s y 0s.
SLaks

Gracias. Probaré esto y te lo haré saber.
Richard M

Hmm. Intenté esto, pero mostró el archivo js completo en el registro de la consola.
Richard M

1
No puedo usar esto pero necesito usar $ (esto)
V-SHY

1
@ Si8 - Actualicé el violín, por lo que el código ignora las casillas de verificación no seleccionadas, lo que debería aliviar las comas adicionales: jsfiddle.net/m4k6vj8x
Ed Schembor

61

Usando selectores

Puede obtener todas las casillas de verificación marcadas de esta manera:

var boxes = $(":checkbox:checked");

Y todo sin marcar así:

var nboxes = $(":checkbox:not(:checked)");

Simplemente puede recorrer cualquiera de estas colecciones y almacenar esos nombres. Si falta algo, sabrá que se ha verificado o no. En PHP, si tiene una serie de nombres marcados, simplemente puede hacer una in_array()solicitud para saber si alguna casilla en particular debe marcarse en una fecha posterior.

Publicar por fascículos

jQuery también tiene un método de serialización que mantendrá el estado de sus controles de formulario. Por ejemplo, el ejemplo proporcionado en el sitio web de jQuery sigue:

single=Single2&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio2

Esto le permitirá conservar la información para los elementos que se verificaron también.


16

Puede recorrer todas las casillas de verificación escribiendo $(':checkbox').each(...).

Si entiendo tu pregunta correctamente, estás buscando el siguiente código:

var str = "";

$(':checkbox').each(function() {
    str += this.checked ? "1," : "0,";
});

str = str.substr(0, str.length - 1);    //Remove the trailing comma

Este código recorrerá todas las casillas de verificación y agregará 1,o 0,a una cadena.


Gracias. También probaré esto.
Richard M

También puede utilizar el atributo de valor. Si está tratando de crear un valor binario, entonces asigne a cada casilla de verificación una potencia creciente de 2 y simplemente agregue las que están marcadas, la suma en binario será la misma que agregar unos y ceros. Estará limitado a 32 casillas de verificación (el valor numérico más grande es 2 ^ 32 en JavaScript [creo que podría ser 64]. Un mejor diseño de base de datos sería más flexible)
Jason Sperske

0

No creo que se haya prestado suficiente atención a las consideraciones del esquema que se mencionaron en la publicación original. Entonces, aquí hay algo a considerar para cualquier novato.

Digamos que siguió adelante y creó esta solución. Todos sus valores de baja categoría se combinan en un solo valor y se almacenan en la base de datos. De hecho, está ahorrando [un poco] de espacio en su base de datos y algo de tiempo codificando.

Ahora consideremos que debe realizar la tarea fácil y frecuente de agregar una nueva casilla de verificación entre las casillas de verificación actuales 3 y 4. Su gerente de desarrollo, cliente, lo que sea, espera que esto sea un cambio simple.

Entonces agrega la casilla de verificación a la interfaz de usuario (la parte fácil). Su código de bucle ya concatenaría los valores sin importar cuántas casillas de verificación. También calcula que el campo de su base de datos es solo un varchar u otro tipo de cadena, por lo que también debería estar bien.

¿Qué sucede cuando los clientes o usted intenta ver los datos anteriores al cambio? Básicamente, estás serializando de izquierda a derecha. Sin embargo, ahora los valores después de 3 están todos desfasados ​​en 1 carácter. ¿Qué vas a hacer con todos tus datos existentes? ¿Va a escribir una aplicación, sacarlo todo de la base de datos, procesarlo para agregar un valor predeterminado para la nueva posición de la pregunta y luego almacenarlo todo en la base de datos? ¿Qué sucede cuando tiene varios valores nuevos con una semana o un mes de diferencia? ¿Qué sucede si mueve las ubicaciones y jQuery las procesa en un orden diferente? Todos sus datos se procesan con manguera y deben volver a procesarse para reorganizarlos.

Todo el concepto de NO proporcionar una estrecha relación clave-valor es ludacris y terminará metiéndote en problemas más temprano que tarde. Para aquellos de ustedes que estén considerando esto, por favor no lo hagan. Las otras sugerencias para cambios de esquema están bien. Utilice una tabla secundaria, más campos en la tabla principal, una tabla de preguntas y respuestas, etc. Simplemente no almacene datos no etiquetados cuando la estructura de esos datos esté sujeta a cambios.


-1
$.extend($.expr[':'], {
        unchecked: function (obj) {
            return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
        }
    });

$("input:checked")
$("input:unchecked")
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.