POSTing Ein unbestimmter Checkbox-Wert

Es gibt so etwas wie einen unbestimmten Checkbox-Wert. Es ist eine Checkbox (<input type="checkbox">), die nicht angehakt ist. Und sie ist auch nicht *nicht* angehakt. Sie ist unbestimmt.

Wir können eine Checkbox in diesem Zustand sogar auswählen und sie mit CSS stylen!

Einige interessante Punkte jedoch

Sie kann nur über JavaScript gesetzt werden. Es gibt kein HTML-Attribut oder keinen Wert dafür.
Sie wird nicht POSTed (oder GETed oder sonst etwas) und hat keinen Wert. Es ist, als wäre sie nicht angehakt.

Sagen wir also, Sie hätten ein Formular wie dieses

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

Und, aus *was für einem Grund auch immer*, Sie machen diese Checkbox unbestimmt

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

Wenn Sie dieses Formular serialisieren und sich ansehen, was POSTed wird, erhalten Sie "name=Chris". Kein Wert für die Checkbox. Umgekehrt, wenn Sie die Checkbox im HTML angehakt hätten und sie in JavaScript nicht berührt hätten, würden Sie "name=Chris&vegetarian=on" erhalten.

Offenbar ist das so beabsichtigt. Checkboxen sind dazu gedacht, boole'sche Werte zu sein, und **der unbestimmte Wert ist nur eine ästhetische Sache, die dazu dient, anzuzeigen, dass visuelle "Kind"-Checkboxen in einem gemischten Zustand sind (einige angehakt, einige nicht).** Das ist in Ordnung. Man kann es jetzt nicht ändern, ohne dass es zu ernsthaften Webseiten-Problemen kommt.

Aber sagen wir, Sie müssen auf dem Server wirklich wissen, ob eine Checkbox in diesem unbestimmten Zustand ist. Der einzige Weg, der mir einfällt, ist, ein begleitendes verstecktes Eingabefeld zu haben, das Sie synchron halten.

<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";

Ich habe den indeterminate-Wert eines Eingabefeldes gesetzt *und* den Wert eines anderen versteckten Eingabefeldes auf "indeterminate" gesetzt, das ich POSTen kann. Serialisiert sieht es aus wie "name=Chris&vegetarian-value=indeterminate". Gut genug.

Siehe den Stift Kann man einen Zwischenwert POSTen? von Chris Coyier (@chriscoyier) auf CodePen.

Thomas Higginbotham

# 15. Oktober 2018

Anstatt ein zusätzliches verstecktes Formularelement zu erstellen, würde ich es vorziehen, den Wert der Checkbox zu setzen. Da Sie JavaScript verwenden, um sie unbestimmt zu machen, können Sie genauso gut JavaScript verwenden, um ihren Zustand beim Absenden des Formulars auf "angehakt" zu ändern, damit sie ihren Wert sendet.

const form = document.querySelector('form');
const checkbox = document.querySelector('input[type=checkbox]');

checkbox.indeterminate = true;
checkbox.value = 'indeterminate';

form.addEventListener('submit', () => {
  if (checkbox.indeterminate) {
    checkbox.checked = true;
  } else {
    checkbox.value = 'on';
  }
}, false);

zzzzBov

Kleiner Einwand

Sie wird nicht POSTed (oder GETed oder sonst etwas) und hat keinen Wert. Es ist, als wäre sie nicht angehakt.

Der checked-Zustand der Checkbox wird durch den indeterminate-Zustand der Checkbox verdeckt. Wenn die Checkbox angehakt war, als der unbestimmte Zustand angewendet wurde, wird der Wert der Checkbox trotzdem mit dem Formular übermittelt (Beispiel).

Emil

Ein css-tricksiger Weg wäre, einige Radio-Buttons so zu gestalten, dass sie wie eine Checkbox aussehen, etwa so

Kein Wert = unbestimmt.

Kommentare