Het plaatsen van een Onbepaalde Selectievakje Waarde

0
20

Er is zoiets als een intermediair selectievakje waarde. Het is een checkbox (<input type=”checkbox”>) die niet wordt gecontroleerd. Noch is het niet gecontroleerd. Het intermediair.

We kunnen zelfs selecteert u een selectievakje in die staat en stijl met CSS!

Een paar opmerkelijke punten:

  1. Het is alleen mogelijk om via JavaScript. Er is geen HTML-kenmerk of de waarde.
  2. Het maakt niet POST (of te KRIJGEN of wat anders) of een waarde hebben. Het is als het wordt uitgeschakeld.

Dus, stel dat u een formulier zoals dit:

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

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

<input name=”vegetarisch” type=”checkbox” class=”fruit”>

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

</form>

En, om welke reden ook, u dit selectievakje onbepaalde:

laat veg = document.querySelector(“.groenten”);
veg.onbepaalde = true;

Als u het serialiseren van dat formulier en neem een kijkje op wat POST, krijg je “name=Chris”. Geen waarde voor het vakje. Omgekeerd, had je aanvinken van de checkbox in de HTML-code en niet raken in JavaScript, u zou krijgen “name=Chris&vegetarische=op”.

Dit is blijkbaar inherent aan het ontwerp. Selectievakjes zijn bedoeld om te worden boolean, en de tussenliggende waarde is slechts een esthetische ding bedoeld om aan te geven dat visuele “kind” selectievakjes zijn in een gemengde toestand (sommige gecontroleerd, sommige niet). Dat is prima. Kan het niet veranderen nu zonder ernstige breuk van websites.

Maar zeggen wat je echt moet weten op de server als een selectievakje is in die tussentoestand. De enige manier die ik kan bedenken is om een buddy verborgen input van u houden in sync.

<input name=”vegetarisch” type=”checkbox” class=”fruit”>
<input name=”vegetarisch-waarde” type=”hidden” class=”veg-waarde”>
laat veg = document.querySelector(“.groenten”);
laat veg_value = document.querySelector(“.veg-waarde”);
veg.onbepaalde = true;
veg_value.waarde = “onbepaalde”;

Ik heb het instellen van de tussentijdse waarde van een input en ik heb nog een verborgen invoer van de waarde voor “onbepaalde”, die ik kan POSTEN. Serieel betekent dat het eruit ziet “name=Chris&vegetarische-waarde=onbepaald”. Goed genoeg.

Zie de Pen Kunt u plaatst een tussenliggende waarde? door Chris Coyier (@chriscoyier) op CodePen.