LoginSignup
5
0

More than 1 year has passed since last update.

HTMLでcheckboxにチェックが入っていないときに値が送信されない時の対応

Posted at

単一のチェックボックスでチェックされていないと値が送信されない

<input type="checkbox" name="hoge" value="1">

たとえば上記のような単一のチェックボックスでON・OFFのようなチェックを作ったとする。
チェックのある場合は問題ないのだが、チェックを外してsubmitするとサーバー側で今回でいうとhogeというkeyで値が取得できない。
これは当然の仕様なのだが、ON・OFFのような場合、サーバー側で値が取れたほうが処理が楽になる。

チェックしていないことを検知するには

<input type='hidden' value='0' name='hoge'>
<input type="checkbox" name="hoge" value="1">

のようにcheckboxのにhiddenで同じ名前のinputタグを作成します。
inputは後ろのもので上書きされるので、

  • チェックされている場合
    • checkboxがサーバーに送信
  • チェックされていない場合
    • hiddenがサーバーに送信

といった具合で、希望通りの値がサーバーに送信されます。

このやり方はスタックオーバーフローで支持を得ているようなので問題ないかと思いますが、なにか弊害があるとしたらご教示いただきたいです。

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0