Indeterminate Checkboxes (Unbestimmte Checkboxen)

Checkbox-Eingabefelder können nur zwei Zustände haben: ausgewählt oder nicht ausgewählt. Sie können jeden Wert haben, aber sie übermitteln diesen Wert (ausgewählt) oder nicht (nicht ausgewählt) bei einer Formularübermittlung. Der Standard ist nicht ausgewählt. Sie können das in HTML wie folgt steuern

<!-- Default to unchecked -->
<input type="checkbox">

<!-- Default to checked, XHTML -->
<input type="checkbox" checked="checked" />

<!-- Default to checked, HTML5 -->
<input type="checkbox" checked>

Visuell gibt es tatsächlich drei Zustände, in denen sich eine Checkbox befinden kann: ausgewählt, nicht ausgewählt oder unbestimmt. Sie sehen so aus

Hier sind einige Dinge, die Sie über unbestimmte Checkboxen wissen sollten

Sie können eine Checkbox nicht über HTML unbestimmt machen. Es gibt kein Attribut für unbestimmt. Es ist jedoch eine Eigenschaft von Checkboxen, die Sie über JavaScript ändern können.

var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;

oder im jQuery-Stil

$("#some-checkbox").prop("indeterminate", true); // prop is jQuery 1.6+

Der unbestimmte Zustand ist nur visuell. Die Checkbox hat immer noch entweder den Status ausgewählt oder nicht ausgewählt. Das bedeutet, dass der visuelle unbestimmte Zustand den tatsächlichen Wert der Checkbox verbirgt, also sollte das in Ihrer Benutzeroberfläche Sinn ergeben!

Wie die Checkboxen selbst, **sieht der unbestimmte Zustand in verschiedenen Browsern unterschiedlich aus.** Hier ist Opera 11.50 auf Mac

Anwendungsfall

Der Grund, warum ich das schreibe, ist, dass mir gerade ein Anwendungsfall für diesen Zustand aufgefallen ist: verschachtelte Checkboxen. Jede Checkbox kann Kind-Checkboxen haben. Wenn alle diese Kinder ausgewählt sind, kann sie ausgewählt werden. Wenn keines ausgewählt ist, ist sie nicht ausgewählt. Wenn *einige* davon ausgewählt sind, befindet sie sich in einem unbestimmten Zustand (in diesem Fall symbolisch „teilweise“ ausgewählt).

Hier ist das in jQuery

Siehe den Pen Indeterminate Checkboxes von Chris Coyier (@chriscoyier) auf CodePen.

Hier ist eine alternative jQuery-Version von TheNotary.

Und hier ist eine reine JavaScript-Version von Jakob Eriksen

Siehe den Pen
Indeterminate Checkboxes (Vanilla JS) von jakob-e (@jakob-e)
auf CodePen.

Und ein paar alternative Ansätze von Alvaro Montoro , Bramus, Gridbuilder, Lewin Probst und Jason Wilson.

Verwendung von StimulusJS von Stephen Margheim

Siehe den Pen
checkbox family von Stephen Margheim (@smargh)
auf CodePen.

Rotation zwischen den Zuständen

Jon Stuebe hat mit der Idee experimentiert, den Zustand mit einem Klick zwischen nicht ausgewählt, unbestimmt und ausgewählt zu wechseln. Hier ist etwas jQuery, um das zu tun

var $check = $("input[type=checkbox]"), el;
$check
   .data('checked',0)
   .click(function(e) {
       
        el = $(this);
                
        switch(el.data('checked')) {
            
            // unchecked, going indeterminate
            case 0:
                el.data('checked',1);
                el.prop('indeterminate',true);
                break;
            
            // indeterminate, going checked
            case 1:
                el.data('checked',2);
                el.prop('indeterminate',false);
                el.prop('checked',true);                
                break;
            
            // checked, going unchecked
            default:  
                el.data('checked',0);
                el.prop('indeterminate',false);
                el.prop('checked',false);
                
        }
        
    });

Siehe den Pen Rotate Through Indeterminate Checkboxes von Chris Coyier (@chriscoyier) auf CodePen.

Der Leser Casual Trash hat mir eine bibliotheksfreie und wesentlich prägnantere Version zum Durchwechseln aller drei visuellen Zustände geschickt, die das `readonly`-Attribut nutzt, das Checkbox-Eingabefelder haben können.

<!-- Inline click handler, just for demo -->
<input type="checkbox" id="cb1" onclick="ts(this)">

function ts(cb) {
  if (cb.readOnly) cb.checked=cb.readOnly=false;
  else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
}

Siehe den Pen Rotate Through Indeterminate Checkboxes von Chris Coyier (@chriscoyier) auf CodePen.