チェックボックスの値がうまく送信されない
受付中
回答 3
投稿
- 評価
- クリップ 0
- VIEW 1,054
前提・実現したいこと
https://remotestance.com/blog/2809/
このサイトを参考にして（ほぼコピペですが）、チェックボックスに画像を重ねることには成功したのですが、値がうまく送信されません。
1つしか選んでいないのに、全てのデータが送信されてしまいます。
その原因として、
<input class="disabled_checkbox" type="checkbox" checked />
ここの「checked」のせいだということまでは分かったのですが、これを消すと今度は逆に何も送信されなくなってしまいます。
どこを直せばいいのか教えてください。
該当のソースコード(phpは自分用に書き換え済)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<form action="test2.php" method="post">
<div id="main">
<ul class="image_list">
<li>
<div class="image_box">
<img class="thumbnail" src="image_icon/AED.png" alt="foo" />
<input class="disabled_checkbox" type="checkbox" name="icon[]" value="AED" checked/>
</div>
</li>
<li>
<div class="image_box">
<img class="thumbnail" src="image_icon/ATM.png" alt="foo" />
<input class="disabled_checkbox" type="checkbox" name="icon[]" value="ATM" checked/>
</div>
</li>
</ul>
</div>
<input type="submit" value="送信" name="send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="./base.js"></script>
</body>
</html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
$icon = $_POST["icon"];
var_dump($icon);
?>
</body>
</html>ul.image_list li {
/* liが横並びになるようにします。 */
display: inline-block;
}
ul.image_list li .image_box {
width: 200px;
height: 200px;
/* チェックボックスの親要素にrelativeを指定しておきます。 */
position: relative;
}
.image_box img.thumbnail {
width: 100%;
height: 100%;
/* 画像にカーソルを合わせたときに、
カーソルが指のマークになるようにします。 */
cursor: pointer;
}
.image_box img.thumbnail.checked {
/* チェックが入った状態だと、枠が表示されるようにします。 */
border: 6px solid blue;
/* 線をwidthとheightに含めるようにします。 */
box-sizing: border-box;
}
.image_box .disabled_checkbox {
/* チェックボックスの位置は絶対位置にします。 */
position: absolute;
/* チェックボックスは、親要素の右上から12pxの位置に配置します。 */
top: 12px;
right: 12px;
/* チェック前は非表示にしておきます。 */
display: none;
/* チェックボックスを大きくします。 */
transform: scale(2);
/* チェックボックスにカーソルを合わせたときに、
カーソルが指のマークになるようにします。 */
cursor: pointer;
}
.image_box img.thumbnail.checked + .disabled_checkbox {
/* 画像にcheckedクラスが指定されたときは、
チェックボックスの非表示を解除します。 */
display: block;
}$(function() {
// チェックボックスのクリックを無効化します。
$('.image_box .disabled_checkbox').click(function() {
return false;
});
// 画像がクリックされた時の処理です。
$('img.thumbnail').on('click', function() {
if (!$(this).is('.checked')) {
// チェックが入っていない画像をクリックした場合、チェックを入れます。
$(this).addClass('checked');
} else {
// チェックが入っている画像をクリックした場合、チェックを外します。
$(this).removeClass('checked')
}
});
});-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
ちょっと何をしたいかわかりません
- チェックボックスにチェックをすれば送られるし
- チェックをしなければ送られない
それだけのこと
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
チェックボックスに対するクリックイベントは無効にされていて、画像がクリック時に変更されているというコードしか書かれていません。
画像とチェックボックスが連動していないので、画像だけチェック、またはチェック解除となってもチェックボックスはずっと初期状態です。送信時は、form内にある入力(inputなど）の値、状態を送信します。画像の状態を見るわけではないので連動させる必要があるということです。
抜粋ではありますが、imgをcheckボックスに関連づけるlabelタグはどうでしょうか。checkboxと連動するlabelの関係は調べると出てくると思います。もちろんchecked属性は初期の状態に合わせて変更が必要です。
<div class="image_box">
<label for="sample1"><img class="thumbnail" src="image_icon/AED.png" alt="foo" /></label>
<input id="sample1" class="disabled_checkbox" type="checkbox" name="icon[]" value="AED" />
</div>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
両方のcheckedは不要です
これはチェックした際に付与されるものなので初期状態からつけるものではないです（例外はありますが）
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.33%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
m.ts10806
2020/02/01 04:25
コードブロック冒頭はファイル名ではなく言語名を書く場所です。
でないとコードハイライトが正常に動作しないことがあります。