回答編集履歴
1
補足の追加。
answer
CHANGED
|
@@ -32,4 +32,51 @@
|
|
|
32
32
|
.location_checkbox:checked + img {
|
|
33
33
|
border: 1px solid red;
|
|
34
34
|
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
**追記(蛇足)：JavaScriptでやるならこうする**
|
|
40
|
+
HTMLは上記回答と同じ。
|
|
41
|
+
|
|
42
|
+
**[動くサンプル](https://jsfiddle.net/3w7qksz2/)**
|
|
43
|
+
|
|
44
|
+
```JavaScript
|
|
45
|
+
$(function() {
|
|
46
|
+
// 画像だけでなくチェックボックスもクリックを拾いたいのでlabelにイベントを設置
|
|
47
|
+
$( '.image_box label' ).click( function() {
|
|
48
|
+
var $this = $( this );
|
|
49
|
+
// チェックボックスの状態を確認してチェックされている際はラベルにクラスを付ける
|
|
50
|
+
if( $this.find( '.location_checkbox' ).prop( 'checked' ) ){
|
|
51
|
+
$this.addClass( 'checked' );
|
|
52
|
+
} else {
|
|
53
|
+
$this.removeClass( 'checked' );
|
|
54
|
+
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
```
|
|
59
|
+
```CSS
|
|
60
|
+
.image_box label {
|
|
61
|
+
display: inline-block;
|
|
62
|
+
min-height: 50px;
|
|
63
|
+
min-width: 50px;
|
|
64
|
+
position: relative;
|
|
65
|
+
}
|
|
66
|
+
/* チェックボックスの位置 */
|
|
67
|
+
.image_box .location_checkbox {
|
|
68
|
+
position: absolute;
|
|
69
|
+
top: 12px;
|
|
70
|
+
right: 12px;
|
|
71
|
+
transform: scale( 1 );
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
}
|
|
74
|
+
.image_box img.thumbnail {
|
|
75
|
+
border: 4px solid rgba( 0, 0, 0, 0 );
|
|
76
|
+
box-sizing: border-box;
|
|
77
|
+
}
|
|
78
|
+
/* チェックが入っていると枠を表示する */
|
|
79
|
+
.image_box .checked img.thumbnail { /* ラベルにクラスを付けているため書き順が変わっています。 */
|
|
80
|
+
border-color: blue;
|
|
81
|
+
}
|
|
35
82
|
```
|