###前提・実現したいこと
htmlとcssでプログラムを書いています。
プログラムの中に、<label>でチェックボックスと画像を括っている文があります。
その状態で画像をクリックすると、borderで画像に枠を表示した上で、チェックボックスのvalueの値を習得するという動作を同時にさせたいと考えております。
更に、枠が表示された画像をもう一度クリックすると、チェックが外れ、画像の枠も消えるという動作もさせたいです。
###発生している問題・エラーメッセージ
画像をクリックすると、チェックボックスにチェック判定が入り、画像に枠が現れるという一連の状態遷移を実現することが出来ていません。
その後の枠が外れる動作も出来ておりません。
追記
最初の問題だった画像をクリックすると、チェックボックスにチェック判定が入るという動作は実現できましたが、次にクリックするとチェックボックスのチェックだけ消えて枠がそのまま残ってしまいます。
###該当のソースコード
編集済
html
<form name="chbox"> <div class="image_box"> <label> <input class="location_checkbox" type="checkbox" name="test" value="test001"> <img class="thumbnail" src="http://placehold.it/50" alt="test001"> </label> </div> </form>
css
/* チェックボックスの位置 */ .image_box .location_checkbox { position: absolute; top: 12px; right: 12px; transform: scale(1); cursor: pointer; } /* チェックが入っていると枠を表示する */ .image_box img.thumbnail.checked { border: 4px solid blue; box-sizing: border-box; } /* 画像にcheckedクラスが指定されると枠を表示 */ .image_box img.thumbnail.checked + .location_checkbox { display: block; }
javascript
$(function() { // 画像がクリックされた時の処理です。 $('img.thumbnail').click(function() { var $val = document.chbox.knight; //画像にチェックが入っているか判断します。 if($('.thumbnail').children().hasClass('checked')){ // 現在の選択を解除します。 $(this).removeClass('checked'); }else{ // チェックを入れた状態にします。 $(this).addClass('checked'); $val.find(input.disabled_checkbox.checked).addClass('checked'); } }); });
###補足情報(言語/FW/ツール等のバージョンなど)
html、css、javascriptに加え、jquery、phpも使用できます。
###最後に
上で述べた内容を実装したいと考えておりましたが、詰まってしまったのでこちらで質問させていただきました。
最後になりましたが、質問をご覧いただきありがとうございました。
初歩的な質問で申し訳ございませんが、ご回答の程よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー