チェックボックスの値がうまく送信されない

前提・実現したいこと

https://remotestance.com/blog/2809/
このサイトを参考にして（ほぼコピペですが）、チェックボックスに画像を重ねることには成功したのですが、値がうまく送信されません。
1つしか選んでいないのに、全てのデータが送信されてしまいます。

その原因として、
<input class="disabled_checkbox" type="checkbox" checked />
ここの「checked」のせいだということまでは分かったのですが、これを消すと今度は逆に何も送信されなくなってしまいます。

どこを直せばいいのか教えてください。

該当のソースコード(phpは自分用に書き換え済)

test1php
1<!DOCTYPE html>
2<html>
3  <head>
4    <link rel="stylesheet" href="./style.css" />
5  </head>
6  <body>
7    <form action="test2.php" method="post">
8
9    <div id="main">
10      <ul class="image_list">
11        <li>
12          <div class="image_box">
13            <img class="thumbnail" src="image_icon/AED.png" alt="foo" />
14            <input class="disabled_checkbox" type="checkbox" name="icon[]" value="AED" checked/>
15          </div>
16        </li>
17        <li>
18          <div class="image_box">
19            <img class="thumbnail" src="image_icon/ATM.png" alt="foo" />
20            <input class="disabled_checkbox" type="checkbox" name="icon[]" value="ATM" checked/>
21          </div>
22        </li>
23      </ul>
24    </div>
25    <input type="submit" value="送信" name="send">
26    </form>
27    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
28    <script src="./base.js"></script>
29  </body>
30</html>

test2php
1<!DOCTYPE html>
2<html>
3  <head>
4  </head>
5  <body>
6    <?php
7    $icon = $_POST["icon"];
8    var_dump($icon);
9     ?>
10  </body>
11</html>

stylecss
1ul.image_list li {
2  /* liが横並びになるようにします。 */
3  display: inline-block;
4}
5ul.image_list li .image_box {
6  width: 200px;
7  height: 200px;
8  /* チェックボックスの親要素にrelativeを指定しておきます。 */
9  position: relative;
10}
11.image_box img.thumbnail {
12  width: 100%;
13  height: 100%;
14  /* 画像にカーソルを合わせたときに、
15  カーソルが指のマークになるようにします。 */
16  cursor: pointer;
17}
18.image_box img.thumbnail.checked {
19  /* チェックが入った状態だと、枠が表示されるようにします。 */
20  border: 6px solid blue;
21  /* 線をwidthとheightに含めるようにします。 */
22  box-sizing: border-box;
23}
24.image_box .disabled_checkbox {
25  /* チェックボックスの位置は絶対位置にします。 */
26  position: absolute;
27  /* チェックボックスは、親要素の右上から12pxの位置に配置します。 */
28  top: 12px;
29  right: 12px;
30  /* チェック前は非表示にしておきます。 */
31  display: none;
32  /* チェックボックスを大きくします。 */
33  transform: scale(2);
34  /* チェックボックスにカーソルを合わせたときに、
35  カーソルが指のマークになるようにします。 */
36  cursor: pointer;
37}
38.image_box img.thumbnail.checked + .disabled_checkbox {
39  /* 画像にcheckedクラスが指定されたときは、
40  チェックボックスの非表示を解除します。 */
41  display: block;
42}

basejs
1$(function() {
2  // チェックボックスのクリックを無効化します。
3  $('.image_box .disabled_checkbox').click(function() {
4    return false;
5  });
6
7  // 画像がクリックされた時の処理です。
8  $('img.thumbnail').on('click', function() {
9    if (!$(this).is('.checked')) {
10      // チェックが入っていない画像をクリックした場合、チェックを入れます。
11      $(this).addClass('checked');
12    } else {
13      // チェックが入っている画像をクリックした場合、チェックを外します。
14      $(this).removeClass('checked')
15    }
16  });
17});

m.ts10806

2020/01/31 19:25

コードブロック冒頭はファイル名ではなく言語名を書く場所です。でないとコードハイライトが正常に動作しないことがあります。

行動規範の内容に同意します

回答3件

チェックボックスに対するクリックイベントは無効にされていて、画像がクリック時に変更されているというコードしか書かれていません。

画像とチェックボックスが連動していないので、画像だけチェック、またはチェック解除となってもチェックボックスはずっと初期状態です。送信時は、form内にある入力(inputなど）の値、状態を送信します。画像の状態を見るわけではないので連動させる必要があるということです。

抜粋ではありますが、imgをcheckボックスに関連づけるlabelタグはどうでしょうか。checkboxと連動するlabelの関係は調べると出てくると思います。もちろんchecked属性は初期の状態に合わせて変更が必要です。

html
1<div class="image_box">
2    <label for="sample1"><img class="thumbnail" src="image_icon/AED.png" alt="foo" /></label>
3    <input id="sample1" class="disabled_checkbox" type="checkbox" name="icon[]" value="AED" />
4</div>
5

投稿2020/01/31 03:48

Yasuhiro

総合スコア46

ちょっと何をしたいかわかりません

チェックボックスにチェックをすれば送られるし
チェックをしなければ送られない

それだけのこと

投稿2020/01/31 01:29

yambejp

総合スコア114837

Takedai

2020/01/31 02:11

その通りですが、今はそれが出来ない状態です。あちらのサイトにはデータの送信の仕方までは書いてなかったので、私の送信の仕方や受け取り方が悪いのでしょうか？

行動規範の内容に同意します

両方のcheckedは不要です
これはチェックした際に付与されるものなので初期状態からつけるものではないです（例外はありますが）

投稿2020/01/31 01:32

sola-msr

総合スコア876

Takedai

2020/01/31 02:05

それは分かっていたのですが、例えば「AED」の方だけにcheckedをつけた場合、何をクリックしても、しなくてもAEDのみが送られるという状態になってしまっています。それと同じくどちらにもcheckedをつけた場合は何をクリックしてもどちらのデータも送信されてしまい、どちらにもcheckedをつけなかった場合、何をクリックしても何も送られないのです。