[HTML,CSS]画像に枠をつける動作とチェックボックスにチェックを入れる動作を同時に行いたい

###前提・実現したいこと

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も使用できます。

###最後に

上で述べた内容を実装したいと考えておりましたが、詰まってしまったのでこちらで質問させていただきました。

最後になりましたが、質問をご覧いただきありがとうございました。
初歩的な質問で申し訳ございませんが、ご回答の程よろしくお願い致します。

kei344

2016/05/14 01:50

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

Cgengodeonngaku

2016/05/14 01:58

貴重な情報ありがとうございます。ご指摘どうり、修正させて頂きました。

kei344

2016/05/14 02:04

CSSは3つに分割しないでいいですよ。

Cgengodeonngaku

2016/05/14 02:09

再修正させて頂きました。

kei344

2016/05/14 02:52

回答が付いた質問の編集は慎重に行ってください。タイプミス程度なら修正する事もありますが、発生している問題まで置き換えるのはやめましょう。そういう場合は「追記」するものです。

Cgengodeonngaku

2016/05/14 02:56

ご指摘いただいた通りです。質問の編集は本当に軽率でした。次からはこのようなことのないように注意いたします。

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

回答2件

ベストアンサー

lavel は label ですね。

実働サンプル

HTML
1<label>
2	<input class="location_checkbox" type="checkbox" name="test" value="test001">
3	<img class="thumbnail" src="http://placehold.it/50">
4</label>
5<label>
6	<input class="location_checkbox" type="checkbox" name="test" value="test002">
7	<img class="thumbnail" src="http://placehold.it/50">
8</label>

CSS
1label {
2	display: inline-block;
3	height: 50px;
4	position: relative;
5	width: 50px;
6}
7.location_checkbox {
8	position: absolute;
9	right: 0;
10	top: 0;
11}
12
13.location_checkbox + img {
14	border: 1px solid rgba( 0, 0, 0, 0 );
15}
16.location_checkbox:checked + img {
17	border: 1px solid red;
18}

追記(蛇足)：JavaScriptでやるならこうする
HTMLは上記回答と同じ。

動くサンプル

JavaScript
1$(function() {
2	// 画像だけでなくチェックボックスもクリックを拾いたいのでlabelにイベントを設置
3	$( '.image_box label' ).click( function() {
4		var $this = $( this );
5		// チェックボックスの状態を確認してチェックされている際はラベルにクラスを付ける
6		if( $this.find( '.location_checkbox' ).prop( 'checked' ) ){
7			$this.addClass( 'checked' );
8		} else {
9			$this.removeClass( 'checked' );
10
11		}
12	});
13});

CSS
1.image_box label {
2	display: inline-block;
3	min-height: 50px;
4	min-width: 50px;
5	position: relative;
6}
7/* チェックボックスの位置 */
8.image_box .location_checkbox {
9	position: absolute;
10	top: 12px;
11	right: 12px;
12	transform: scale( 1 );
13	cursor: pointer;
14}
15.image_box img.thumbnail {
16	border: 4px solid rgba( 0, 0, 0, 0 );
17	box-sizing: border-box;
18}
19/* チェックが入っていると枠を表示する */
20.image_box .checked img.thumbnail { /* ラベルにクラスを付けているため書き順が変わっています。 */
21	border-color: blue;
22}

投稿2016/05/14 02:19

編集2016/05/14 09:25

kei344

総合スコア69398

Cgengodeonngaku

2016/05/14 02:39

的確なご回答、有難うございます。 <label>は完全に見落としていたので修正しておきました。枠を作る動作は実現できたのですが、再クリックすると枠が消えずに、チェックボックスの中身だけ消えてしまいます。次はこちらの動作で詰まってしまいました。質問内容も修正しておきます。二度目のお礼になりますが、ご回答の程本当にありがとうございます。