0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

input type="checkbox"で複数チェックすると最後の値しか表示されない

Posted at

##現象
3つのチェックボックスを作り、複数チェックしてデータを送信すると、最後にチェックした値しか表示されない。(1つのみチェックしているときは正しく表示される。)

例1 例2 例3 例4
user1
user2
user3
結果 user2のみ user3のみ user3のみ user3のみ

##上手くいかなかったコード

form.html
<form action="test.php" method="GET">
    <label for="user1"><input type="checkbox" name="user" id="user1" value="user1">user1</label><br>
    <label for="user2"><input type="checkbox" name="user" id="user2" value="user2">user2</label><br>
    <label for="user3"><input type="checkbox" name="user" id="user3" value="user3">user3</label><br>
    <button type="submit">送信</button>
</form>
test.php
<?php
var_dump($_GET['user']);

すべてのチェックボックスに✅して送信(例4)

結果
string(5) "user3"

##原因
3つとも同じ名前(user)で値を送信しようとしているため、複数チェックされているとuserに設定された値が上書きされてしまい、最後にチェックした値だけになってしまう。

name="user[]"
にすることで、上書きせず複数の値を送信することができる。

##改善されたコード

form.html
<form action="test.php" method="GET">
    <label for="user1"><input type="checkbox" name="user[]" id="user1" value="user1">user1</label><br>
    <label for="user2"><input type="checkbox" name="user[]" id="user2" value="user2">user2</label><br>
    <label for="user3"><input type="checkbox" name="user[]" id="user3" value="user3">user3</label><br>
    <button type="submit">送信</button>
</form>

※PHPファイルは変更なし

結果
array(3) { [0]=> string(5) "user1" [1]=> string(5) "user2" [2]=> string(5) "user3" }

##参考にしたサイト
https://seeknext.co.jp/frontend/checkbox-post/

0
1
1

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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?