前提・実現したいこと
jQuryで画像のチェックボックスを作成し、画像をチェック入れたらPHP側でデーターを受け取りたい
https://remotestance.com/blog/2809/
こちらのURLを参考に複数の画像をクリックしてデーターを受け取れるようにしたのですが、チェックを入れてないのにデーターが送信されてしまう
発生している問題・エラーメッセージ
画像にチェック入れてもいれなくても img:foo1.png img:foo2.png img:foo3.png と出力されてしまう。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="robots" content="noindex" /> 6 <link rel="stylesheet" href="./style.css" /> 7 </head> 8 <body> 9 <div id="main"> 10 <ul class="image_list"> 11 <form action="./image.php" method="POST"> 12 <li> 13 <div class="image_box"> 14 <img class="thumbnail" src="./foo1.png" alt="foo" /> 15 <!-- phase2 --> 16 <input class="disabled_checkbox" type="checkbox" name="img[]"value="foo1.png" checked /> 17 </div> 18 </li> 19 <li> 20 <div class="image_box"> 21 <img class="thumbnail" src="./foo2.png" alt="foo" /> 22 <!-- phase2 --> 23 <input class="disabled_checkbox" type="checkbox" name="img[]" value="foo2.png" checked /> 24 </div> 25 </li> 26 <li> 27 <div class="image_box"> 28 <img class="thumbnail" src="./foo3.png" alt="foo" /> 29 <!-- phase2 --> 30 <input class="disabled_checkbox" type="checkbox" name="img[]" value="foo3.png" checked /> 31 </div> 32 </li> 33 34 <input type="submit" value="送信"> 35 </form> 36 </ul> 37 </div> 38 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 39 <script src="./base2.js"></script> 40 </body> 41</html> 42
PHP
1<?php 2$img = $_POST['img']; 3if($img == "") exit("画像を選択してください。"); 4foreach ($img as $imgNO => $value){ 5echo "img:{$value}<br />"; 6 7} 8?>
jQuery
1 2$(function() { 3 // チェックボックスのクリックを無効化します。 4 $('.image_box .disabled_checkbox').click(function() { 5 return false; 6 }); 7 8 // 画像がクリックされた時の処理です。 9 $('img.thumbnail').on('click', function() { 10 if (!$(this).is('.checked')) { 11 // チェックが入っていない画像をクリックした場合、チェックを入れます。 12 $(this).addClass('checked'); 13 } else { 14 // チェックが入っている画像をクリックした場合、チェックを入外します。 15 $(this).removeClass('checked') 16 } 17 }); 18}); 19 20
試したこと
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。