知名度が低いウェブ標準ひとり Advent Calendar 2021 – 06 日目

チェックボックスはオン・オフを表現するのに使われますが、未決定 indeterminate というオン・オフどちらでもない（あるいはどちらでもある）状態があり得ます。

JavaScript から indeterminate プロパティを操作するとそれを設定できます。また CSS では擬似クラス :indeterminate を用いてスタイルをあてることもできます。

またまだ選択されていないラジオボタンもこの未決定状態とみなされます。

基本的な使い方

設定するには JavaScript から。HTML の属性はありません。

elCheckbox.indeterminate = true;

チェックボックスを使った入れ子構造の設定で、親項目のチェックボックスがオンオフどちらでもない横棒の外観になっている。

擬似クラスはある。

input[type="checkbox"]:indeterminate + label {
  …
}

注意：外観のみの影響

indeterminate という未決定状態は「見た目」にのみ影響を与えます。

<input type="checkbox"> の checked は null を含む 3 値論理ではなく 2 値論理で、常に true/false を示します。el.indeterminate = true でも checked が null 等になることはありません。

未設定のラジオボタンも

基本的にはチェックボックスを対象に使うと思うんだけど、ラジオボタン <input type="radio"> で同 name のものがまだどれも選択されていない状態のとき、件の擬似クラスが有効になります。

<select> はそういうのなかった。

英単語 indeterminate

determine で決心する、です。その名詞系の反転。

おしまい

設定系の UI 作ってるときこういうの欲しいよね。差し上げますよ。

参考