Publicar un valor de casilla de verificación indeterminado | Programar Plus

0

Existe algo así como un valor de casilla de verificación indeterminado. Es una casilla de verificación (<input type="checkbox">) que no está marcada. Tampoco no se comprueba. es indeterminado

¡Incluso podemos seleccionar una casilla de verificación en ese estado y diseñarla con CSS!

Aunque algunos puntos curiosos:

  1. Solo es posible configurar a través de JavaScript. No hay ningún atributo o valor HTML para ello.
  2. No POST (o GET o cualquier otra cosa) o tiene un valor. Es como estar descontrolado.

Entonces, digamos que tienes un formulario como este:

<form action="" method="POST" id="form">
  
  <input name="name" type="text" value="Chris" />
  
  <input name="vegetarian" type="checkbox" class="veg">
  
  <input type="submit" value="Submit">
  
</form>

Y, por alguna razón, hace que esa casilla de verificación sea indeterminada:

let veg = document.querySelector(".veg");
veg.indeterminate = true;

Si serializa ese formulario y echa un vistazo a lo que PUBLICAR, obtendrá "name=Chris". No hay valor para la casilla de verificación. Por el contrario, si hubiera marcado la casilla de verificación en HTML y no la hubiera tocado en JavaScript, obtendría "name=Chris&vegetarian=on".

Aparentemente, esto es por diseño. Las casillas de verificación están destinadas a ser booleanas, y el valor indeterminado es solo una cosa estética destinada a indicar que las casillas de verificación visuales “secundarias” están en un estado mixto (algunas marcadas, otras no). Esta bien. No puedo cambiarlo ahora sin que se rompan seriamente los sitios web.

Pero digamos que realmente necesita saber en el servidor si una casilla de verificación está en ese estado indeterminado. La única forma que se me ocurre es tener una entrada oculta de un amigo que mantengas sincronizada.

<input name="vegetarian" type="checkbox" class="veg">
<input name="vegetarian-value" type="hidden" class="veg-value">
let veg = document.querySelector(".veg");
let veg_value = document.querySelector(".veg-value"); 
veg.indeterminate = true;
veg_value.value = "indeterminate";

he puesto el indeterminate valor de una entrada y he establecido otro valor de entrada oculto para "indeterminate", que puedo PUBLICAR. Serializado significa que parece "name=Chris&vegetarian-value=indeterminate". Suficientemente bueno.

Ver el bolígrafo ¿Puede publicar un valor intermedio? por Chris Coyier (@chriscoyier) en CodePen.