HTML チェックボックスでfalseも判定する

目的

• HTMLのinput要素にてtrueだけでなくfalse（チェックされていない）状態を受け取る方法をまとめる

詳細

• 下記のようにinput要素のチェックボックスの前に同じnameでinput要素をhiddenで記載する。同じnameで指定することによりチェックボックスにチェックが入っているとnameの値に紐付いてvalueの値が更新される。

  <form action="" method="post">
      <input type="hidden" name="test" value="0">
      <input type="checkbox" name="test" value="1">
      <button type="submit">送信</button>
  </form>
  

• 直線のinputはtype="hidden"なので表示されない。

• 仮にチェックボックスにチェックが入ったらvalueが1に更新される。

• チェックボックスにチェックが入らなかったらinput type="hidden"で指定されたままなのでvalueは0となる。