Posta Obestämd Kryssrutan Värde

0
19

Det är en sådan sak som en mellanliggande kryssrutan värde. Det är en kryssruta (<input type=”checkbox”>) som inte kontrolleras. Det är heller inte kontrolleras. Det mellanliggande.

Vi kan även markera en kryssruta i det tillståndet och stil med CSS!

Lite nyfiken poäng om:

  1. Det är endast möjligt att ställa in via JavaScript. Det finns inga HTML-attribut eller värde för det.
  2. Det spelar inte upp (eller FÅR eller vad som helst annat) eller har ett värde. Det är som att vara oskyddad.

Så, säg att du hade en form som denna:

<form action=”” method=”POST” id=”form”>

<input name=”namn” type=”text” value=”Chris” />

<input name=”vegetarisk” type=”checkbox” class=”veg”>

<input type=”submit” value=”Skicka”>

</form>

Och, av någon anledning, gör du att kryssrutan obestämd:

låt veg = dokument.querySelector(“.veg”);
veg.obestämd = true;

Om du serialisera att form och ta en titt på vad som kommer EFTER att du ska få “name=Chris”. Inget värde för kryssrutan. Omvänt, om du hade markerat kryssrutan i HTML och ville inte röra det i JavaScript, du skulle få “name=Chris&vegetariska=on”.

Tydligen är detta med design. Kryssrutor är tänkt att vara boolean, och den mellanliggande värde är bara en estetisk sak tänkt att indikera att visual “barn” kryssrutor finns i ett blandat tillstånd (en del kontrolleras, vissa inte). Det är bra. Kan inte ändra på det nu utan allvarliga brott av webbplatser.

Men säg att du verkligen behöver veta om servern om en kryssruta är i detta mellantillstånd. Det enda sättet jag kan tänka på är att ha en kompis dold ingång till att du hålla i synk.

<input name=”vegetarisk” type=”checkbox” class=”veg”>
<input name=”vegetarian-värde” type=”hidden” class=”veg-värde”>
låt veg = dokument.querySelector(“.veg”);
låt veg_value = dokument.querySelector(“.veg-värde”);
veg.obestämd = true;
veg_value.värde = “obestämd”;

Jag har satt den mellanliggande värde av en ingång och jag har satt en annan dold ingång värdet till “obestämd”, som jag kan lägga upp. Följetong: det ser ut som “name=Chris&vegetariska-värde=obestämda”. Tillräckligt bra.

Se Pennan Kan du SKICKA ett mellanliggande värde? av Chris Coyier (@chriscoyier) på CodePen.