html - bootstrap - ¿<Input type="checkbox"/> solo publica datos si está marcado?

html checkbox group

Question

¿Es un comportamiento estándar para los navegadores enviar solo los datos del valor de entrada de la casilla de verificación si se comprueba 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 constante en todos los navegadores?

Answer 1

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

Sí, porque de lo contrario no habría una manera sólida de determinar si la casilla de verificación estaba realmente marcada o no (si cambió el valor, puede existir el caso en que el valor deseado, si se verificara, sería el mismo que el que fue cambiado a).

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

Otras respuestas confirman que "on" 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
}

Answer 2

A partir de la especificación de HTML 4, que debe 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 radio) son interruptores de encendido / apagado que pueden ser conmutados por el usuario. Un interruptor está "encendido" cuando se establece el atributo comprobado del elemento de control. Cuando se envía un formulario, solo los controles de casilla de verificación "activados" pueden tener éxito.

El éxito se define de la siguiente manera:

Un control exitoso es "válido" para la presentación. 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.

Answer 3

Al igual que la variante ASP.NET, excepto que coloque 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 se marca una casilla, se envía su nombre y valor "on", mientras que si no está marcada, se enviará el nombre de la entrada oculta correspondiente y el valor que desee darle. Al final obtendrá la matriz $ _POST para leer, con todos los elementos marcados y no marcados, valores "on" y "false", sin duplicados. Fácil de procesar en PHP.

Answer 4

Al tener el mismo problema con las casillas de verificación no verificadas que no se enviarán en el envío de formularios, obtuve una solución diferente a la de los elementos de casilla de verificación.

Obtener todas las casillas sin marcar con

var checkboxQueryString;

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

Answer 5

En HTML, cada elemento <input /> está asociado con un único nombre y 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 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:

• two y six fueron excluidos porque tenían el atributo disabled establecido.
• three se enviaron dos veces porque tenía dos entradas válidas con el mismo nombre.
• four no se envió porque es una checkbox que no se checked
• six no se envió a pesar de haber sido checked porque el atributo disabled tiene una precedencia más alta.
• seven no tiene un atributo name="" 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 no tendrá su par de nombre + valor enviado al servidor, pero otras entradas que comparten el mismo nombre se enviarán con él.

Los frameworks como ASP.NET MVC trabajan alrededor de esto (subrepticiamente) emparejando cada entrada de checkbox con una entrada hidden en el HTML renderizado, así:

@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 los dos:

SomeBooleanProperty=true
SomeBooleanProperty=false

Pero el servidor ignorará la =false versión =false porque ve la versión =true , por lo que si no ve =true , puede determinar que la casilla de verificación se procesó y que el usuario no la SomeBooleanProperty a diferencia de las entradas SomeBooleanProperty no siendo prestado en absoluto.

Answer 6

Las casillas de verificación están publicando el valor "activado" si y solo si la casilla de verificación está marcada. Insistido en 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" />

Answer 7

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, usando un pequeño algoritmo puede obtener algo más como debería proporcionar HTML.

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 en bruto

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'',
)  

Answer 8

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 javascript cambia el formulario de 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á "encendida" o "apagada". Usé 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));
        }

Answer 9

Sí, el comportamiento estándar es que el valor solo se envía si la casilla de verificación está marcada. Esto normalmente significa que debe tener una forma de recordar qué casillas de verificación está esperando del lado del servidor, ya que no todos los datos provienen 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 radio) son interruptores de encendido / apagado que pueden ser conmutados por el usuario. Un interruptor está "encendido" cuando se establece el atributo comprobado del elemento de control. Cuando se envía un formulario, solo los controles de casilla de verificación "activados" pueden tener éxito.

Answer 10

Si la casilla de verificación no está marcada, no contribuye a los datos enviados en el envío del formulario.

Sección HTML5 4.10.22.4 La construcción del conjunto de datos de formulario describe la forma en que se construyen los datos:

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

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

y luego se especifica el value predeterminado on si falta el value :

De lo contrario, si el elemento de campo es un elemento de entrada cuyo tipo de atributo está en el estado de la casilla de verificación o el estado del botón de opción, ejecuta estos pasos secundarios anidados:

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

Por lo tanto, las casillas no marcadas se saltan 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.

Answer 11

Tengo una página (formulario) que genera dinámicamente casilla de verificación, por lo que estas respuestas me 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 coloco 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 no se seleccionan todas las checkboxes , los valores devueltos por el campo oculto estarán apagados.

Por ejemplo, aquí con cinco casillas de verificación insertadas dinámicamente, el formulario POSTS los 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 3 y 4 casillas de verificación están checked o checked .

En esencia, el campo de entrada ficticio o oculto solo indica que todo está desactivado, a menos que haya un "encendido" debajo que le da el índice que necesita sin una sola línea de código.

.