2020年04月01日

checkboxの値を複数postする方法

お世話になっております。SeekNextの佐藤です。
今回は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>

これでpostされた内容を確認してみると、複数選択しても最後の選択肢だけがpostされており複数postできていません。何が原因か分かりますか?

複数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>

上記のname属性を「name=”check[]”」に変更します。そうすると意図した通りの結果になりました。

複数の値をpostできた画像

意外と知らない人も多いのではないかと思いますので、参考になれば幸いです。