未チェックはfalseになる？チェックボックスのFormDataを試す

未チェックの項目は入らない

チェックを外した項目は、falseという値で入るわけではありません。今回の例で2つとも未チェックにすると、FormDataのentriesは空配列になり、getで読んだsoundとtipsはどちらもnullでした。

2つともチェックすると、value="yes"を指定したsoundは文字列yes、valueを省略したtipsは文字列onになりました。チェック状態の真偽値と、フォームの値を分けて読むのがポイントです。

3つの操作で比べる

1. 「初期状態へ戻す」を押し、2つのチェックが外れた状態で「値を確認」を押します。entriesが空、soundとtipsがnullになることを見ます。
2. 「音を有効にする」と「ヒントを表示する」をチェックして、もう一度「値を確認」を押します。yesとonが表示されます。
3. 「初期状態へ戻す」を押します。チェックが外れ、結果欄が「まだ確認していません。」へ戻ります。

ボタンはFormDataを作って画面に表示するだけで、サーバーへ送信しません。ZIPを展開してexample.htmlを開けば同じ実験ができます。

nullとfalseを混同しない

getのnullは、今回の名前に対応する項目がFormDataにないことを表します。チェック状態そのものをJavaScriptで知りたいときは、input要素のcheckedを読みます。受信側に未選択も伝える必要がある場合は、送るデータの形を別に設計してください。

MDNのvalueの説明でも、value省略時はon、未選択の項目は送信に含まれないとされています。同名項目が複数あるケース、disabled、実際のサーバー受信は今回の検証外です。編集を止めた欄の違いはreadonlyとdisabledの比較を参照してください。