前提・実現したいこと
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});