checkboxの値を複数postする方法

HTML

2021.11.05

今回はcheckboxをpostする際に注意するべきことを書いていきます。

以下のようなHTMLコードがありpostしようとしているとします。

<form action="" method="post">
 <div>
  <label for="checkbox1">選択肢1</label>
  <input type="checkbox" id="checkbox1" name="check" value="0">
 </div>
 <div>
  <label for="checkbox2">選択肢2</label>
  <input type="checkbox" id="checkbox2" name="check" value="1">
 </div>
 <div>
  <label for="checkbox3">選択肢3</label>
  <input type="checkbox" id="checkbox3" name="check" value="2">
 </div>
 <button type="submit">送信する</button>
</form>

上記の状態だと、複数checkboxにチェックを入れても最後の値しかpostされません。解決するためにはhtmlのname属性を配列にする必要があります。

<form action="" method="post">
 <div>
  <label for="checkbox1">選択肢1</label>
  <input type="checkbox" id="checkbox1" name="check[]" value="0">
 </div>
 <div>
  <label for="checkbox2">選択肢2</label>
  <input type="checkbox" id="checkbox2" name="check[]" value="1">
 </div>
 <div>
  <label for="checkbox3">選択肢3</label>
  <input type="checkbox" id="checkbox3" name="check[]" value="2">
 </div>
 <button type="submit">送信する</button>
</form>