teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問[HTML,CSS]画像に枠をつける動作とチェックボックスにチェックを入れる動作を同時に行いたい

編集履歴

質問編集履歴

6

ご指摘いただいた内容の修正

2016/05/14 02:58

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

test CHANGED
File without changes
test CHANGED
@@ -19,6 +19,14 @@
19
19
  ###発生している問題・エラーメッセージ
20
20
 
21
21
 
22
+
23
+ 画像をクリックすると、チェックボックスにチェック判定が入り、画像に枠が現れるという一連の状態遷移を実現することが出来ていません。
24
+
25
+ その後の枠が外れる動作も出来ておりません。
26
+
27
+
28
+
29
+ **追記**
22
30
 
23
31
  最初の問題だった画像をクリックすると、チェックボックスにチェック判定が入るという動作は実現できましたが、次にクリックするとチェックボックスのチェックだけ消えて枠がそのまま残ってしまいます。
24
32
 

5

発生している問題の内容の修正

2016/05/14 02:58

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  htmlとcssでプログラムを書いています。
6
6
 
7
- プログラムの中に、<lavel>でチェックボックスと画像を括っている文があります。
7
+ プログラムの中に、<label>でチェックボックスと画像を括っている文があります。
8
8
 
9
9
  その状態で画像をクリックすると、borderで画像に枠を表示した上で、チェックボックスのvalueの値を習得するという動作を同時にさせたいと考えております。
10
10
 
@@ -20,9 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- 画像をクリックすると、チェックボックスにチェック判定が入り、画像に枠が現れるという一連の状態遷移を実現することが出来ていません。
23
+ 最初の問題だった画像をクリックすると、チェックボックスにチェック判定が入るという動作は実現できましたが、次にクリックするとチェックボックスのチェックだけ消えて枠がそのまま残ってしまいます。
24
-
25
- その後の枠が外れる動作も出来ておりません。
26
24
 
27
25
 
28
26
 
@@ -42,13 +40,13 @@
42
40
 
43
41
  <div class="image_box">
44
42
 
45
- <lavel>
43
+ <label>
46
44
 
47
45
  <input class="location_checkbox" type="checkbox" name="test" value="test001">
48
46
 
49
- <img class="thumbnail" src="画像URL.jpg" alt="test001">
47
+ <img class="thumbnail" src="http://placehold.it/50" alt="test001">
50
48
 
51
- </lavel>
49
+ </label>
52
50
 
53
51
  </div>
54
52
 

4

再修正

2016/05/14 02:48

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

test CHANGED
File without changes
test CHANGED
@@ -78,11 +78,7 @@
78
78
 
79
79
  }
80
80
 
81
- ```
82
81
 
83
-
84
-
85
- ```
86
82
 
87
83
  /* チェックが入っていると枠を表示する */
88
84
 
@@ -94,11 +90,7 @@
94
90
 
95
91
  }
96
92
 
97
- ```
98
93
 
99
-
100
-
101
- ```
102
94
 
103
95
  /* 画像にcheckedクラスが指定されると枠を表示 */
104
96
 

3

ソースコードを```で括りました。

2016/05/14 02:08

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

test CHANGED
File without changes
test CHANGED
@@ -36,6 +36,8 @@
36
36
 
37
37
  **html**
38
38
 
39
+ ```
40
+
39
41
  <form name="chbox">
40
42
 
41
43
  <div class="image_box">
@@ -52,9 +54,13 @@
52
54
 
53
55
  </form>
54
56
 
57
+ ```
58
+
55
59
 
56
60
 
57
61
  **css**
62
+
63
+ ```
58
64
 
59
65
  /* チェックボックスの位置 */
60
66
 
@@ -72,7 +78,11 @@
72
78
 
73
79
  }
74
80
 
81
+ ```
75
82
 
83
+
84
+
85
+ ```
76
86
 
77
87
  /* チェックが入っていると枠を表示する */
78
88
 
@@ -84,7 +94,11 @@
84
94
 
85
95
  }
86
96
 
97
+ ```
87
98
 
99
+
100
+
101
+ ```
88
102
 
89
103
  /* 画像にcheckedクラスが指定されると枠を表示 */
90
104
 
@@ -94,9 +108,13 @@
94
108
 
95
109
  }
96
110
 
111
+ ```
112
+
97
113
 
98
114
 
99
115
  **javascript**
116
+
117
+ ```
100
118
 
101
119
  $(function() {
102
120
 
@@ -111,8 +129,6 @@
111
129
  //画像にチェックが入っているか判断します。
112
130
 
113
131
  if($('.thumbnail').children().hasClass('checked')){
114
-
115
-
116
132
 
117
133
  // 現在の選択を解除します。
118
134
 
@@ -138,6 +154,8 @@
138
154
 
139
155
  });
140
156
 
157
+ ```
158
+
141
159
  ###補足情報(言語/FW/ツール等のバージョンなど)
142
160
 
143
161
 

2

誤字の修正

2016/05/14 01:56

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

test CHANGED
File without changes
test CHANGED
@@ -96,7 +96,7 @@
96
96
 
97
97
 
98
98
 
99
- **javasqript**
99
+ **javascript**
100
100
 
101
101
  $(function() {
102
102
 
@@ -142,7 +142,7 @@
142
142
 
143
143
 
144
144
 
145
- html、css、javasqriptに加え、jquery、phpも使用できます。
145
+ html、css、javascriptに加え、jquery、phpも使用できます。
146
146
 
147
147
 
148
148
 

1

javasqript、cssの構文の追加とそれに伴うhtmlの修正

2016/05/14 01:38

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

test CHANGED
File without changes
test CHANGED
@@ -30,23 +30,33 @@
30
30
 
31
31
 
32
32
 
33
+ 編集済
34
+
35
+
36
+
33
37
  **html**
34
38
 
35
- <div class="image_box">
39
+ <form name="chbox">
36
40
 
37
- <lavel>
41
+ <div class="image_box">
38
42
 
39
- <input class="location_checkbox" type="checkbox" name="test" value="test001">
43
+ <lavel>
40
44
 
41
- <img src="画像URL.jpg" alt="test001">
45
+ <input class="location_checkbox" type="checkbox" name="test" value="test001">
42
46
 
43
- </lavel>
47
+ <img class="thumbnail" src="画像URL.jpg" alt="test001">
44
48
 
49
+ </lavel>
50
+
45
- </div>
51
+ </div>
52
+
53
+ </form>
46
54
 
47
55
 
48
56
 
49
57
  **css**
58
+
59
+ /* チェックボックスの位置 */
50
60
 
51
61
  .image_box .location_checkbox {
52
62
 
@@ -63,6 +73,70 @@
63
73
  }
64
74
 
65
75
 
76
+
77
+ /* チェックが入っていると枠を表示する */
78
+
79
+ .image_box img.thumbnail.checked {
80
+
81
+ border: 4px solid blue;
82
+
83
+ box-sizing: border-box;
84
+
85
+ }
86
+
87
+
88
+
89
+ /* 画像にcheckedクラスが指定されると枠を表示 */
90
+
91
+ .image_box img.thumbnail.checked + .location_checkbox {
92
+
93
+ display: block;
94
+
95
+ }
96
+
97
+
98
+
99
+ **javasqript**
100
+
101
+ $(function() {
102
+
103
+ // 画像がクリックされた時の処理です。
104
+
105
+ $('img.thumbnail').click(function() {
106
+
107
+ var $val = document.chbox.knight;
108
+
109
+
110
+
111
+ //画像にチェックが入っているか判断します。
112
+
113
+ if($('.thumbnail').children().hasClass('checked')){
114
+
115
+
116
+
117
+ // 現在の選択を解除します。
118
+
119
+ $(this).removeClass('checked');
120
+
121
+
122
+
123
+ }else{
124
+
125
+
126
+
127
+ // チェックを入れた状態にします。
128
+
129
+ $(this).addClass('checked');
130
+
131
+ $val.find(input.disabled_checkbox.checked).addClass('checked');
132
+
133
+
134
+
135
+ }
136
+
137
+ });
138
+
139
+ });
66
140
 
67
141
  ###補足情報(言語/FW/ツール等のバージョンなど)
68
142