チェックリストと全部チェック
書いたものは、この画面の中だけで数えています。どこにも送りません。保存もしません。ページを閉じたり読み込み直したりすると消えるので、残したいものは自分で書き写してください。
5個のうち 0個にチェックが入っています（のこり 5個）
よくある質問
チェックボックスの「どちらでもない」とは何ですか？
一部だけチェックされているときの「全部チェック」の見た目です。全部入っているわけでも、どれも入っていないわけでもないので、四角の中に横棒が出ます。HTML の仕様ではこれを indeterminate（インディターミネット・決まっていない）と呼びます。入と切に続く3つ目の見た目ですが、値としては入か切のどちらかのままです。
indeterminate を HTML に書いても効かないのはなぜですか？
HTML の仕様に、そういう属性が用意されていないからです。仕様が定めているのは JavaScript から読み書きする indeterminate だけです。だから input type=checkbox に indeterminate と書き足しても、意味を持たない知らない文字として無視されます。付けるには JavaScript で el.indeterminate = true と書くしかありません。
「どちらでもない」のとき、送られる値はどうなりますか？
入か切のどちらかとして送られます。HTML の仕様はチェックボックスを「2つの状態を持つ部品」と定め、indeterminate は選ばれ方を見えにくくするだけだと書いています。しかも indeterminate はチェックが入っているかどうかとは無関係なので、チェックが入ったまま「どちらでもない」の見た目にすることもできます。見た目と値がずれるので、そこだけは注意が必要です。
読み上げのために aria-checked=mixed と書くべきですか？
書いてはいけません。W3C の ARIA in HTML は、input type=checkbox に aria-checked を使ってはならないと定めています。さらに HTML-AAM は、indeterminate と aria-checked の両方があるときは indeterminate だけを見せなければならないと決めているので、書いても無視されます。JavaScript で indeterminate を立てれば、読み上げには mixed と自動で伝わります。
項目が0個のとき、「全部チェック」はどうなりますか？
このページでは押せない状態にして「項目がありません」と書いています。数学では「何も入っていない集まりのすべてが○○である」は本当だとされるので、0個を「全部チェック済み」と扱う書き方もありえます。ですが画面にチェックが付いていたら、やり終えたと読めてしまいます。何もしていないのに終わったことにするほうが困るので、別の状態として分けました。
書いた項目は保存されますか？
保存しません。どこにも送りません。書いた文字はこの画面の中だけで数えていて、通信も保存もしていないので、ページを閉じたり読み込み直したりすると消えます。残しておきたいときは、自分で書き写すか、メモの道具に貼り付けてください。チェックの入り具合も同じで、画面を離れると消えます。
やることを1行ずつ書くと、チェックできる一覧になります。書いたものはどこにも送りません。ついでに、チェックボックスの3つ目の状態を触って確かめられます。
チェックボックスには、3つ目の状態があります
チェックボックスは入と切の2つに見えます。ところが、上の一覧でいくつかだけにチェックを入れてみてください。 「全部チェック」の四角が、チェックでも空でもない見た目に変わります。 四角の中に横棒が1本引かれた形です。
これが3つ目の状態です。全部入っているわけでも、 どれも入っていないわけでもないので、そのどちらの絵も描けません。 仕様ではこれをindeterminate（インディターミネット）と呼びます。 日本語にすると「決まっていない」です。
下の3つは、その見本です。押せます。3つ目を押すと何が起きるかは、このあとの節で説明します。
3つ目の状態は、HTML には書けません
ここがいちばん引っかかるところです。入と切は HTML に書けます ── <input type="checkbox" checked>と書けば、はじめからチェックが入った状態で出てきます。ところが3つ目には、この書き方がありません。
<input type="checkbox" indeterminate>と書いても何も起きません。ブラウザは「知らない言葉が書いてある」 としか受け取らないので、見た目は空の四角のままです。
理由は仕様の書き方にあります。HTML の仕様（新しいタブで開きます）が定めているのは「JavaScript から読み書きする indeterminate」だけで、HTML に書く属性としては、はじめから用意されていません。 MDN も「indeterminate は JavaScript からしか設定できない」と、そのまま書いています。
だから、この3つ目を出す方法は1つしかありません。 画面を描いたあとに、 JavaScript で 箱.indeterminate = true と入れることです。 このページもそうやっています。
押すと、3つ目の状態は消えます
さっきの見本の3つ目を押してみると、横棒が消えて、ふつうのチェックに変わります。 そしてもう一度押しても、横棒は戻ってきません。
これは壊れているのではなく、仕様がそう決めています。 押されたときの手順に「まず『決まっていない』を切ってから、入と切を入れかえる」と書かれているためです。 3つ目の状態は人が押して作れる状態ではない、 というのが HTML の考え方なわけです。
戻すには、もう一度 JavaScript から入れ直すしかありません。 見本の「見本をもとにもどす」を押すと戻るのは、 そのボタンが JavaScript を動かしているからです。
見た目が3つでも、送られる値は2つのままです
ここが「へえ」です。3つ目の状態は見せ方であって、値ではありません。 仕様はチェックボックスを「2つの状態を持つ部品」と定義したうえで、 indeterminate のときは「選ばれ方を見えにくくする」とだけ書いています。
しかも仕様は、この3つ目がチェックが入っているかどうかとは無関係だと はっきり書いています。つまりチェックが入ったまま「どちらでもない」の見た目にすることもできます。 そのとき画面は「どちらでもない」に見えますが、送られるのは「入っている」です。
見た目と中身がずれるので、ここは気をつけるところです。 3つ目を使ってよいのは、「全部チェック」のように、ほかのチェックを見張っている箱に限ると考えておくと間違いが少なくなります。
読み上げには aria-checked と書いてはいけません
目で見えない人のために、状態を読み上げに伝える ARIA（エイリア）という 書き方があります。ここで「mixed（混ざっている）と書けばよい」と 考えたくなりますが、それは禁じられています。
ARIA in HTML（新しいタブで開きます）（W3C 勧告）は、チェックボックスに aria-checked を使ってはならないと定めています。 さらにHTML-AAM（新しいタブで開きます） は、 両方が書かれていたらindeterminate のほうだけを見せなければならないと決めています。つまり書いても無視されます。
では何もしなくてよいのかというと、そのとおりです。 JavaScript で indeterminate を立てれば、読み上げには「mixed」と自動で伝わります。 手で書き足すほうが、ずれて嘘をつく危険を増やすだけだ、というのが仕様の立場です。
項目が0個のとき、「全部チェック」は何になるか
入・切・どちらでもない、の3つを決めました。 では項目が1つも無いときは、どれでしょうか。 全部入っているとも、 入っていないとも言えます。
数学には答えがあって、「本当」です。 「かごの中のリンゴが全部赤い」は、かごが空っぽなら本当とされます。 赤くないリンゴを1つも取り出せないからです。 これを空虚な真（くうきょのしん）と呼びます。
でもこのページは、そうしませんでした。画面で「全部チェック」に印が付いていたら、「やり終えた」と読めてしまうからです。何もしていないのに終わったことにするほうが困ります。 だから4つ目として分けて、押せない状態にし、「項目がありません」と文字で書いています。仕様が決めてくれないところは、決めたうえで、決めたと書くことにしています。
3つの状態を、色で見分けさせないようにしています
状態を色の違いだけで示すと、色の見え方がちがう人に伝わりません （ウェブのアクセシビリティ指針 WCAG の達成基準 1.4.1「色の使用」）。 このページは3つの状態を形（四角の中のチェック・空・横棒）と文字（「全部に入っています」など）の 2つで示していて、色は1つも使っていません。
押すところもラベル全体にしてあります。小さな四角だけが押せる作りだと、 指では狙いにくいためです（達成基準 2.5.5「ターゲットのサイズ」が求める44ピクセルを、行の高さで確保しています）。
出どころ: 3つ目の状態の決まりはHTML Standard の checkbox の節（新しいタブで開きます）、読み上げへの伝わり方は ARIA in HTML（W3C 勧告・2026年8月11日）と HTML-AAM 1.0、 JavaScript からしか設定できないことの確認はMDN（新しいタブで開きます）から取っています。引用そのものは src/core/toggle.ts の冒頭に原文のまま残してあります。 一覧に出せる項目の上限（300個）だけは出典のある数ではなく、このページで決めた値です。