¿Las entradas de la casilla de verificación solo publican datos si están marcadas?


184

¿Es un comportamiento estándar para los navegadores enviar solo los 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 es correcto, ¿es este comportamiento consistente en todos los navegadores?

Respuestas:


187

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

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

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

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


18
Desafortunadamente, eso es doloroso, solo se envían casillas de verificación al servidor, no las que no están marcadas. Si sabe de antemano qué casillas de verificación hay en la página, entonces no es un problema en el script del lado del servidor para administrarlas. El problema es cuando no lo sabe de antemano: las casillas de verificación creadas dinámicamente en la página dependen de cierta lógica empresarial. Luego debe hacer trucos y utilizar campos de entrada ocultos paralelos para esas casillas de verificación y cumplirlos con JavaScript.
sbrbot

La clave para crear un validador consistente con "controles fallidos permitidos (es decir, type =" checkbox ") es designar estos controles de formulario como transitorios . Cuando no tienen éxito, modifique dinámicamente su desinfectante y validador en consecuencia.
Anthony Rutledge

3
Solución: el uso <select>con dos opciones ony off:-)
Andy

83

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

Entonces, si tiene estas entradas en su <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 de 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 disabledconjunto de atributos.
  • three fue enviado dos veces porque tenía dos entradas válidas con el mismo nombre.
  • fourno fue enviado porque es un checkboxque no fuechecked
  • sixno se envió 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 una casilla de verificación que no está marcada, por lo tanto, no tendrá su par nombre + valor enviado al servidor, pero otras entradas que comparten el mismo nombre se enviarán con él.

Los marcos como ASP.NET MVC evitan esto al emparejar (subrepticiamente) cada checkboxentrada con una hiddenentrada en el HTML representado, de esta manera:

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

Renders:

<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 =true, puede determinar que la casilla de verificación se procesó y que el usuario no la verificó, a diferencia de las SomeBooleanPropertyentradas que no se representan en absoluto.


Vale la pena señalar que si tiene varios campos, como con el cuadro de texto oculto adicional, el backend recibirá una serie de valores.
Salami

Solo recibe una matriz si la usa []al final del nombre de entrada, el comportamiento predeterminado es enviar solo el último elemento con ese nombre, por lo que siempre que la entrada oculta esté antes de la casilla de verificación, funcionará.
beeglebug

Al tener dos campos con el mismo nombre (campo oculto + campo de casilla de verificación), y al marcar la casilla de verificación, el valor de publicación es una cadena de valores separada por comas, es decir. algo así como "0,1"
ʞᴉɯ

1
@beeglebug Lo que está describiendo es cómo PHP maneja nombres y valores, el []sufijo no es parte de la especificación HTML y los navegadores no lo tratan especialmente. Sin []PHP solo se permitirá el acceso a un único valor (el último valor) en lugar de todos los valores.
Dai

1
Usar la propiedad oculta antes de que la casilla de verificación funcione para mí en todos los navegadores que he probado usando GET y POST con PHP. Cuando lo coloqué después del control de la casilla de verificación, siempre hizo que el resultado fuera falso.
adrianwadey

16

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

HTML5 sección 4.10.22.4 La 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 pasos para este elemento: [...]

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

y luego onse especifica el valor predeterminado si valuefalta:

De lo contrario, si el elemento de campo es un elemento de entrada cuyo atributo de tipo se encuentra en el estado Casilla de verificación o en el estado del Botón de radio, ejecute estos pasos adicionales anidados:

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

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

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


10

Las casillas de verificación están publicando el valor 'on' si y solo si la casilla 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" />

8

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

Sí, porque de lo contrario no habría una forma sólida de determinar si la casilla de verificación estaba realmente marcada o no (si cambiara el valor, el caso puede existir cuando el valor deseado si estuviera marcado sería el mismo que estaba) cambiado a).

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

Otras respuestas confirman que "activado" es el valor predeterminado. Sin embargo, si no está interesado en el valor, simplemente use:

if (isset($_POST['the_checkbox'])){
    // name="the_checkbox" is checked
}

7

De la especificación HTML 4, que debería ser coherente en casi todos los navegadores:

http://www.w3.org/TR/html401/interact/forms.html#checkbox

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

Exitoso se define de la siguiente manera:

Un control exitoso es "válido" para el envío. Cada control exitoso tiene su nombre de control emparejado con su valor actual como parte del conjunto de datos del formulario enviado. Un control exitoso debe definirse dentro de un elemento FORM y debe tener un nombre de control.


5

input type = "hidden" name = "is_main" value = "0"

input type = "casilla de verificación" name = "is_main" value = "1"

para que pueda controlar así como lo hice en la aplicación. si marca entonces envíe el valor 1, de lo contrario 0


3

Ninguna de las respuestas anteriores me satisfizo. Encontré que la mejor solución es incluir una entrada oculta antes de cada entrada de casilla de verificación con el mismo nombre.

<input type="hidden" name="foo[]" value="off"/>

<input type="checkbox" name="foo[]"/>

Luego, en el lado del servidor, con un pequeño algoritmo puede obtener algo más que HTML debería proporcionar.

function checkboxHack(array $checkbox_input): array
{
    $foo = [];
    foreach($checkbox_input as $value) {
        if($value === 'on') {
            array_pop($foo);
        }
        $foo[] = $value;
    }
    return $foo;
}

Esta será la entrada sin procesar

array (
    0 => 'off',
    1 => 'on',
    2 => 'off',
    3 => 'off',
    4 => 'on',
    5 => 'off',
    6 => 'on',
),

Y la función volverá

array (
    0 => 'on',
    1 => 'off',
    2 => 'on',
    3 => 'on',
)  

1

Tengo una página (formulario) que genera dinámicamente la casilla de verificación, por lo que estas respuestas han sido de gran ayuda. Mi solución es muy similar a muchas aquí, pero no puedo evitar pensar que es más fácil de implementar.

Primero pongo un cuadro de entrada oculto en línea con mi casilla de verificación, es decir

 <td><input class = "chkhide" type="hidden" name="delete_milestone[]" value="off"/><input type="checkbox" name="delete_milestone[]"   class="chk_milestone" ></td>

Ahora, si todos checkboxesestán sin seleccionar, los valores devueltos por el campo oculto estarán desactivados.

Por ejemplo, aquí con cinco casillas de verificación insertadas dinámicamente, forman POSTSlos siguientes valores:

  'delete_milestone' => 
array (size=7)
  0 => string 'off' (length=3)
  1 => string 'off' (length=3)
  2 => string 'off' (length=3)
  3 => string 'on' (length=2)
  4 => string 'off' (length=3)
  5 => string 'on' (length=2)
  6 => string 'off' (length=3)

Esto muestra que solo las casillas 3 y 4 son ono checked.

En esencia, el campo de entrada oculto u oculto solo indica que todo está apagado a menos que haya un "encendido" debajo del índice apagado, que luego le proporciona el índice que necesita sin una sola línea de código del lado del cliente.

.


0

Al igual que la variante ASP.NET, excepto poner la entrada oculta con el mismo nombre antes de la casilla de verificación real (del mismo nombre). Solo se enviarán los últimos valores. De esta forma, si una casilla está marcada, se envía su nombre y valor "on", mientras que si no está marcada, se enviará el nombre de la entrada oculta correspondiente y cualquier valor que desee darle. Al final, obtendrá la matriz $ _POST para leer, con todos los elementos marcados y sin marcar, valores "on" y "false", sin claves duplicadas. Fácil de procesar en PHP.


0

Al tener el mismo problema con las casillas de verificación no marcadas que no se enviarán en el envío de formularios, se me ocurrió otra solución que refleja los elementos de la casilla de verificación.

Obtener todas las casillas de verificación sin marcar con

var checkboxQueryString;

$form.find ("input[type=\"checkbox\"]:not( \":checked\")" ).each(function( i, e ) {
  checkboxQueryString += "&" + $( e ).attr( "name" ) + "=N"
});

-2

Resolví el problema con este código:

Formulario HTML

<input type="checkbox" id="is-business" name="is-business" value="off" onclick="changeValueCheckbox(this)" >
<label for="is-business">Soy empresa</label>

y la función de JavaScript al cambiar la forma del valor de la casilla de verificación:

//change value of checkbox element
function changeValueCheckbox(element){
   if(element.checked){
    element.value='on';
  }else{
    element.value='off';
  }
}

y el servidor verificó si la publicación de datos está "activada" o "desactivada". Solía ​​playframework java

        final Map<String, String[]> data = request().body().asFormUrlEncoded();

        if (data.get("is-business")[0].equals('on')) {
            login.setType(new MasterValue(Login.BUSINESS_TYPE));
        } else {
            login.setType(new MasterValue(Login.USER_TYPE));
        }
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.