¿Las entradas de las casillas de verificación solo publican datos si están marcadas?

Resuelto Mark asked hace 12 años • 13 respuestas

¿Es un comportamiento estándar que los navegadores solo envíen datos del valor de entrada de la casilla de verificación si se marca al enviar el formulario?

Y si no se proporcionan datos de valor, ¿el valor predeterminado siempre está "activado"?

Suponiendo que lo anterior sea correcto, ¿este comportamiento es consistente en todos los navegadores?

Mark avatar Jul 11 '12 07:07 Mark
Aceptado

Sí, el comportamiento estándar es que el valor solo se envía si la casilla de verificación está marcada. Por lo general, esto significa que debe tener una forma de recordar qué casillas de verificación espera en el lado del servidor, ya que no todos los datos provienen del formulario.

El valor predeterminado siempre es "activado", esto debería ser coherente en todos los navegadores.

Esto está cubierto en la recomendación HTML 4 del W3C :

Las casillas de verificación (y los botones de opción) son interruptores de encendido/apagado que el usuario puede activar. Un interruptor está "encendido" cuando se establece el atributo marcado del elemento de control. Cuando se envía un formulario, sólo los controles de casilla de verificación "activados" pueden tener éxito.

John C avatar Jul 11 '2012 00:07 John C

En HTML, cada <input />elemento está asociado con un único par de nombre y valor (pero no único). Este par se envía en la solicitud posterior (en este caso, un cuerpo de solicitud POST) solo si es <input />"exitoso".

Entonces, si tienes estas entradas en tu <form>DOM:

<input type="text"     name="one"   value="foo"                        />
<input type="text"     name="two"   value="bar"    disabled="disabled" />
<input type="text"     name="three" value="first"                      />
<input type="text"     name="three" value="second"                     />

<input type="checkbox" name="four"  value="baz"                        />
<input type="checkbox" name="five"  value="baz"    checked="checked"   />
<input type="checkbox" name="six"   value="qux"    checked="checked" disabled="disabled" />
<input type="checkbox" name=""      value="seven"  checked="checked"   />

<input type="radio"    name="eight" value="corge"                      />
<input type="radio"    name="eight" value="grault" checked="checked"   />
<input type="radio"    name="eight" value="garply"                     />

Generará estos pares nombre+valor que se enviarán al servidor:

one=foo
three=first
three=second
five=baz
eight=grault

Darse cuenta de:

  • twoy sixfueron excluidos porque tenían el disabledatributo establecido.
  • threese envió dos veces porque tenía dos entradas válidas con el mismo nombre.
  • fourno fue enviado porque es un checkboxque no fuechecked
  • sixno fue enviado a pesar de ser checkedporque el disabledatributo tiene mayor prioridad.
  • sevenno tiene un name=""atributo enviado, por lo que no se envía.

Con respecto a su pregunta: puede ver que, por lo tanto, una casilla de verificación que no está marcada no enviará su par nombre+valor al servidor, pero se enviarán otras entradas que compartan el mismo nombre.

Los marcos como ASP.NET MVC solucionan esto emparejando (subrepticiamente) cada checkboxentrada con una hiddenentrada en el HTML renderizado, así:

@Html.CheckBoxFor( m => m.SomeBooleanProperty )

Representa:

<input type="checkbox" name="SomeBooleanProperty" value="true" />
<input type="hidden"   name="SomeBooleanProperty" value="false" />

Si el usuario no marca la casilla de verificación, se enviará lo siguiente al servidor:

SomeBooleanProperty=false

Si el usuario marca la casilla de verificación, se enviarán ambos:

SomeBooleanProperty=true
SomeBooleanProperty=false

Pero el servidor ignorará la =falseversión porque ve la =trueversión, por lo que si no la ve, =truepuede determinar que la casilla de verificación se representó y que el usuario no la marcó, a diferencia de las SomeBooleanPropertyentradas que no se representan en absoluto.

Dai avatar Jul 11 '2012 00:07 Dai

Si la casilla de verificación no está marcada, no contribuye a los datos enviados al enviar el formulario.

La sección 4.10.22.4 de HTML5 , Construcción del conjunto de datos del formulario, describe la forma en que se construyen los datos del formulario:

Si se cumple alguna de las siguientes condiciones, omita estos subpasos para este elemento: [...]

El elemento de campo es un elemento de entrada cuyo atributo de tipo está en el estado Casilla de verificación y cuya verificación es falsa.

ony luego se especifica el valor predeterminado si valuefalta:

De lo contrario, si el elemento de campo es un elemento de entrada cuyo atributo de tipo está en el estado Casilla de verificación o Botón de opción, ejecute estos subpasos anidados adicionales:

Si el elemento de campo tiene un atributo de valor especificado, entonces deje que valor sea el valor de ese atributo; de lo contrario, deje que el valor sea la cadena "on".

Por lo tanto, las casillas no marcadas se omiten durante la construcción de datos del formulario.

Se requiere un comportamiento similar en HTML4 . Es razonable esperar este comportamiento de todos los navegadores compatibles.

Adam Zalcman avatar Jul 11 '2012 01:07 Adam Zalcman

Las casillas de verificación publican el valor "activado" si y solo si la casilla de verificación está marcada. En lugar de capturar el valor de la casilla de verificación, puede usar entradas ocultas

JS :

var chk = $('input[type="checkbox"]');
    chk.each(function(){
        var v = $(this).attr('checked') == 'checked'?1:0;
        $(this).after('<input type="hidden" name="'+$(this).attr('rel')+'" value="'+v+'" />');
    });

chk.change(function(){ 
        var v = $(this).is(':checked')?1:0;
        $(this).next('input[type="hidden"]').val(v);
    });

HTML :

<label>Active</label><input rel="active" type="checkbox" />
Lanister avatar Feb 18 '2015 11:02 Lanister