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

編集履歴

質問編集履歴

6

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

2016/05/14 02:58

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

title CHANGED
File without changes
body CHANGED
@@ -9,6 +9,10 @@
9
9
 
10
10
  ###発生している問題・エラーメッセージ
11
11
 
12
+ 画像をクリックすると、チェックボックスにチェック判定が入り、画像に枠が現れるという一連の状態遷移を実現することが出来ていません。
13
+ その後の枠が外れる動作も出来ておりません。
14
+
15
+ **追記**
12
16
  最初の問題だった画像をクリックすると、チェックボックスにチェック判定が入るという動作は実現できましたが、次にクリックするとチェックボックスのチェックだけ消えて枠がそのまま残ってしまいます。
13
17
 
14
18
  ###該当のソースコード

5

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

2016/05/14 02:58

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  ###前提・実現したいこと
2
2
 
3
3
  htmlとcssでプログラムを書いています。
4
- プログラムの中に、<lavel>でチェックボックスと画像を括っている文があります。
4
+ プログラムの中に、<label>でチェックボックスと画像を括っている文があります。
5
5
  その状態で画像をクリックすると、borderで画像に枠を表示した上で、チェックボックスのvalueの値を習得するという動作を同時にさせたいと考えております。
6
6
  更に、枠が表示された画像をもう一度クリックすると、チェックが外れ、画像の枠も消えるという動作もさせたいです。
7
7
 
@@ -9,8 +9,7 @@
9
9
 
10
10
  ###発生している問題・エラーメッセージ
11
11
 
12
- 画像をクリックすると、チェックボックスにチェック判定が入り、画像に枠が現れるという一連の状態遷移を実現することが出来ていません。
12
+ 最初の問題だった画像をクリックすると、チェックボックスにチェック判定が入るという動作は実現できましたが、次にクリックするとチェックボックスのチェックだけ消えて枠がそのまま残ってしまいます。
13
- その後の枠が外れる動作も出来ておりません。
14
13
 
15
14
  ###該当のソースコード
16
15
 
@@ -20,10 +19,10 @@
20
19
  ```
21
20
  <form name="chbox">
22
21
  <div class="image_box">
23
- <lavel>
22
+ <label>
24
23
  <input class="location_checkbox" type="checkbox" name="test" value="test001">
25
- <img class="thumbnail" src="画像URL.jpg" alt="test001">
24
+ <img class="thumbnail" src="http://placehold.it/50" alt="test001">
26
- </lavel>
25
+ </label>
27
26
  </div>
28
27
  </form>
29
28
  ```

4

再修正

2016/05/14 02:48

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

title CHANGED
File without changes
body CHANGED
@@ -38,17 +38,13 @@
38
38
  transform: scale(1);
39
39
  cursor: pointer;
40
40
  }
41
- ```
42
41
 
43
- ```
44
42
  /* チェックが入っていると枠を表示する */
45
43
  .image_box img.thumbnail.checked {
46
44
  border: 4px solid blue;
47
45
  box-sizing: border-box;
48
46
  }
49
- ```
50
47
 
51
- ```
52
48
  /* 画像にcheckedクラスが指定されると枠を表示 */
53
49
  .image_box img.thumbnail.checked + .location_checkbox {
54
50
  display: block;

3

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

2016/05/14 02:08

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

title CHANGED
File without changes
body CHANGED
@@ -17,6 +17,7 @@
17
17
  編集済
18
18
 
19
19
  **html**
20
+ ```
20
21
  <form name="chbox">
21
22
  <div class="image_box">
22
23
  <lavel>
@@ -25,8 +26,10 @@
25
26
  </lavel>
26
27
  </div>
27
28
  </form>
29
+ ```
28
30
 
29
31
  **css**
32
+ ```
30
33
  /* チェックボックスの位置 */
31
34
  .image_box .location_checkbox {
32
35
  position: absolute;
@@ -35,19 +38,25 @@
35
38
  transform: scale(1);
36
39
  cursor: pointer;
37
40
  }
41
+ ```
38
42
 
43
+ ```
39
44
  /* チェックが入っていると枠を表示する */
40
45
  .image_box img.thumbnail.checked {
41
46
  border: 4px solid blue;
42
47
  box-sizing: border-box;
43
48
  }
49
+ ```
44
50
 
51
+ ```
45
52
  /* 画像にcheckedクラスが指定されると枠を表示 */
46
53
  .image_box img.thumbnail.checked + .location_checkbox {
47
54
  display: block;
48
55
  }
56
+ ```
49
57
 
50
58
  **javascript**
59
+ ```
51
60
  $(function() {
52
61
  // 画像がクリックされた時の処理です。
53
62
  $('img.thumbnail').click(function() {
@@ -55,7 +64,6 @@
55
64
 
56
65
  //画像にチェックが入っているか判断します。
57
66
  if($('.thumbnail').children().hasClass('checked')){
58
-
59
67
  // 現在の選択を解除します。
60
68
  $(this).removeClass('checked');
61
69
 
@@ -68,6 +76,7 @@
68
76
  }
69
77
  });
70
78
  });
79
+ ```
71
80
  ###補足情報(言語/FW/ツール等のバージョンなど)
72
81
 
73
82
  html、css、javascriptに加え、jquery、phpも使用できます。

2

誤字の修正

2016/05/14 01:56

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

title CHANGED
File without changes
body CHANGED
@@ -47,7 +47,7 @@
47
47
  display: block;
48
48
  }
49
49
 
50
- **javasqript**
50
+ **javascript**
51
51
  $(function() {
52
52
  // 画像がクリックされた時の処理です。
53
53
  $('img.thumbnail').click(function() {
@@ -70,7 +70,7 @@
70
70
  });
71
71
  ###補足情報(言語/FW/ツール等のバージョンなど)
72
72
 
73
- html、css、javasqriptに加え、jquery、phpも使用できます。
73
+ html、css、javascriptに加え、jquery、phpも使用できます。
74
74
 
75
75
  ###最後に
76
76
 

1

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

2016/05/14 01:38

投稿

Cgengodeonngaku
Cgengodeonngaku

スコア12

title CHANGED
File without changes
body CHANGED
@@ -14,15 +14,20 @@
14
14
 
15
15
  ###該当のソースコード
16
16
 
17
+ 編集済
18
+
17
19
  **html**
20
+ <form name="chbox">
18
- <div class="image_box">
21
+ <div class="image_box">
19
- <lavel>
22
+ <lavel>
20
- <input class="location_checkbox" type="checkbox" name="test" value="test001">
23
+ <input class="location_checkbox" type="checkbox" name="test" value="test001">
21
- <img src="画像URL.jpg" alt="test001">
24
+ <img class="thumbnail" src="画像URL.jpg" alt="test001">
22
- </lavel>
25
+ </lavel>
23
- </div>
26
+ </div>
27
+ </form>
24
28
 
25
29
  **css**
30
+ /* チェックボックスの位置 */
26
31
  .image_box .location_checkbox {
27
32
  position: absolute;
28
33
  top: 12px;
@@ -31,6 +36,38 @@
31
36
  cursor: pointer;
32
37
  }
33
38
 
39
+ /* チェックが入っていると枠を表示する */
40
+ .image_box img.thumbnail.checked {
41
+ border: 4px solid blue;
42
+ box-sizing: border-box;
43
+ }
44
+
45
+ /* 画像にcheckedクラスが指定されると枠を表示 */
46
+ .image_box img.thumbnail.checked + .location_checkbox {
47
+ display: block;
48
+ }
49
+
50
+ **javasqript**
51
+ $(function() {
52
+ // 画像がクリックされた時の処理です。
53
+ $('img.thumbnail').click(function() {
54
+ var $val = document.chbox.knight;
55
+
56
+ //画像にチェックが入っているか判断します。
57
+ if($('.thumbnail').children().hasClass('checked')){
58
+
59
+ // 現在の選択を解除します。
60
+ $(this).removeClass('checked');
61
+
62
+ }else{
63
+
64
+ // チェックを入れた状態にします。
65
+ $(this).addClass('checked');
66
+ $val.find(input.disabled_checkbox.checked).addClass('checked');
67
+
68
+ }
69
+ });
70
+ });
34
71
  ###補足情報(言語/FW/ツール等のバージョンなど)
35
72
 
36
73
  html、css、javasqriptに加え、jquery、phpも使用できます。