チェックなしはfalseとして送られる？checkboxの送信値と項目の省略を試そう

チェックボックスのチェックを外して送れば、falseという値が届くのかな。HTMLの普通のフォームでは、そうとは限らないよ。

このページでは、チェックの有無とフォームデータの中身を比べる。フォームデータは、入力欄の名前と値を組にしたもの。ブラウザだけで試せて、実際の送信先やアカウントは必要ないよ。

未選択なら項目そのものが入らない

<form id="sample">
  <label>
    <input type="checkbox" name="news" value="yes">
    お知らせを受け取る
  </label>
</form>

この入力欄では、nameのnewsが項目の名前、valueのyesが選択時の値だよ。チェックが付いたときは、newsという名前とyesという文字列がフォームデータへ入る。

チェックが付いていないときは、news=falseになるのではなく、newsの組自体が入らない。サーバー側で「項目がない場合をどう扱うか」を決める必要があるんだ。

valueを省いた場合の値はon

<input type="checkbox" name="notice">

value属性がないチェックボックスを選ぶと、既定の値は文字列のonになる。真偽値のtrueが自動で入るわけではないよ。入力欄のチェック状態を表すcheckedというJavaScriptのプロパティと、フォームで渡す値を区別しよう。

ページ内でデータを取り出す

const form = document.querySelector('#sample');
const pairs = [...new FormData(form).entries()];
console.log(pairs);

FormDataは、フォームから名前と値を集めるための仕組み。この例では中身を読むだけで、ネットへ送信しないよ。

1. 作例で二つのチェックを外したまま「データを確認」を押す。結果は空の配列になる。
2. newsだけにチェックを付け、newsとyesが現れることを見る。
3. noticeも選び、noticeの値がonであることを確認する。
4. 「最初から試す」で両方を未選択へ戻す。

保存済みの設定を直すときは契約をそろえる

フォームから項目が来なかった場合、「オフに変える」「更新しない」「不正な入力とする」のどれを選ぶかは、受信側の仕様による。特に既存設定の一部だけを更新するAPIでは、項目なしとfalseを同じ意味にしない設計もあるよ。

すべてのチェックボックスに同じ名前のhidden入力を足せば必ず解決する、とも考えないでね。同じ名前が二つ届く可能性があり、サーバーの読み方で結果が変わる。送信形式、許可する値、欠けた項目の意味を、画面側と受信側で一緒に決めよう。

編集部では2026年10月29日にMDNを確認し、選択状態の四通りでFormDataの実際の組をブラウザで検証した。送信や設定の保存は行わない作例だよ。nameとid、チェックボックスとラジオも合わせて読んでね。