teratail
回答率
85.47%
質問するログイン新規登録
トップjQueryプラグインに関する質問画像の上にチェックボックスを重ねて表示＋クリックで外枠に枠線

編集履歴

質問編集履歴

2

質問内容を変更してしまったので元に戻した。

2022/02/10 04:48

投稿

yuko_momi
yuko_momi

スコア4

test CHANGED
File without changes
test CHANGED
@@ -12,65 +12,62 @@
12
12
 
13
13
  ```html
14
14
  <ul class="image_list">
15
- <li>
15
+ <li>
16
- <div class="image_box">
16
+ <div class="image_box">
17
- <img class="thumbnail" src="/img/mg_01.png" alt="">
17
+ <img class="thumbnail" src="./img/mg_01.png" alt="foo" />
18
- <input class="disabled_checkbox" type="checkbox" checked />
18
+ 　　<input class="disabled_checkbox" type="checkbox" checked />
19
- </div>
19
+ </div>
20
- </li>
20
+ </li>
21
21
  </ul>
22
22
  ```
23
23
  ```css
24
-
25
- .image_box.checked {
24
+ ul.image_list li {
26
- border: 1px solid #BC3500;
25
+ display: inline-block;
27
- }
26
+ }
28
- ul.image_list li .image_box {
27
+ ul.image_list li .image_box {
29
28
  width: 140px;
30
29
  height: 160px;
31
- margin-bottom: 8px;
32
30
  background: #ffffff;
33
31
  text-align: center;
34
32
  position: relative;
35
- box-sizing: border-box;
36
- border: 1px solid #ffffff;
37
- }
33
+ }
38
- .image_box img.thumbnail {
34
+ .image_box img.thumbnail {
39
35
  width: 95px;
40
36
  padding-top: 12px;
41
- }
37
+ }
38
+ .image_box img.thumbnail.checked {
39
+ border: 1px solid #BC3500;
40
+ }
42
- .image_box .disabled_checkbox {
41
+ .image_box .disabled_checkbox {
43
42
  position: absolute;
44
43
  bottom: 0;
45
44
  left: 0;
46
45
  display: none;
46
+ transform: scale(2);
47
+ cursor: pointer;
47
- }
48
+ }
48
49
  .image_box img.thumbnail.checked + .disabled_checkbox {
49
50
  display: block;
50
- }
51
+ }
51
-
52
- .checked .disabled_checkbox {
53
- display: block;
54
- }
55
52
  ```
56
53
  ```js
57
54
  $(function() {
58
- // チェックボックスのクリックを無効化します。
55
+ // チェックボックスのクリックを無効化します。
59
- $('.image_box .disabled_checkbox').click(function() {
56
+ $('.image_box .disabled_checkbox').click(function() {
60
- return false;
57
+ return false;
61
- });
62
-
63
- // 画像がクリックされた時の処理です。
64
- $('.image_box').click(function() {
65
- var $imageList = $('.image_list');
66
-
67
- // 現在の選択を解除します。
68
- $imageList.find('.image_box.checked').removeClass('checked');
69
-
70
- // チェックを入れた状態にします。
71
- $(this).addClass('checked');
72
- });
73
58
  });
59
+
60
+ // 画像がクリックされた時の処理です。
61
+ $('img.thumbnail').click(function() {
62
+ var $imageList = $('.image_list');
63
+
64
+ // 現在の選択を解除します。
65
+ $imageList.find('img.thumbnail.checked').removeClass('checked');
66
+
67
+ // チェックを入れた状態にします。
68
+ $(this).addClass('checked');
69
+ });
70
+ });
74
71
  ```
75
72
  もし、わかる方がいたらご教授いただけると幸いです。
76
73
  よろしくお願いいたします。
jQueryプラグインcheckboxJavaScript

1

修正

2022/02/10 02:51

投稿

yuko_momi
yuko_momi

スコア4

test CHANGED
File without changes
test CHANGED
@@ -21,62 +21,56 @@
21
21
  </ul>
22
22
  ```
23
23
  ```css
24
+
24
- ul.image_list {
25
+ .image_box.checked {
25
- display: flex;
26
- flex-direction: row;
26
+ border: 1px solid #BC3500;
27
- flex-wrap: wrap;
28
27
  }
29
- ul.image_list li {
30
- margin: 0 17px 21px;
31
- }
32
- ul.image_list li .image_box {
28
+ ul.image_list li .image_box {
33
29
  width: 140px;
34
30
  height: 160px;
31
+ margin-bottom: 8px;
35
32
  background: #ffffff;
36
33
  text-align: center;
37
34
  position: relative;
35
+ box-sizing: border-box;
36
+ border: 1px solid #ffffff;
38
- }
37
+ }
39
- .image_box img.thumbnail {
38
+ .image_box img.thumbnail {
40
39
  width: 95px;
41
40
  padding-top: 12px;
42
- }
41
+ }
43
- .image_box img.thumbnail.checked {
44
- border: 1px solid #BC3500;
45
- box-sizing: border-box;
46
- }
47
- .image_box .disabled_checkbox {
42
+ .image_box .disabled_checkbox {
48
- /* チェックボックスの位置は絶対位置にします。 */
49
43
  position: absolute;
50
- /* チェックボックスは、親要素の右上から12pxの位置に配置します。 */
51
44
  bottom: 0;
52
45
  left: 0;
53
- /* チェック前は非表示にしておきます。 */
54
46
  display: none;
55
- }
47
+ }
56
48
  .image_box img.thumbnail.checked + .disabled_checkbox {
57
- /* 画像にcheckedクラスが指定されたときは、
58
- チェックボックスの非表示を解除します。 */
59
49
  display: block;
60
- }
50
+ }
51
+
52
+ .checked .disabled_checkbox {
53
+ display: block;
54
+ }
61
55
  ```
62
56
  ```js
63
57
  $(function() {
64
- // チェックボックスのクリックを無効化します。
58
+ // チェックボックスのクリックを無効化します。
65
- $('.image_box .disabled_checkbox').click(function() {
59
+ $('.image_box .disabled_checkbox').click(function() {
66
- return false;
60
+ return false;
61
+ });
62
+
63
+ // 画像がクリックされた時の処理です。
64
+ $('.image_box').click(function() {
65
+ var $imageList = $('.image_list');
66
+
67
+ // 現在の選択を解除します。
68
+ $imageList.find('.image_box.checked').removeClass('checked');
69
+
70
+ // チェックを入れた状態にします。
71
+ $(this).addClass('checked');
72
+ });
67
73
  });
68
-
69
- // 画像がクリックされた時の処理です。
70
- $('img.thumbnail').click(function() {
71
- var $imageList = $('.image_list');
72
-
73
- // 現在の選択を解除します。
74
- $imageList.find('img.thumbnail.checked').removeClass('checked');
75
-
76
- // チェックを入れた状態にします。
77
- $(this).addClass('checked');
78
- });
79
- });
80
74
  ```
81
75
  もし、わかる方がいたらご教授いただけると幸いです。
82
76
  よろしくお願いいたします。
jQueryプラグインcheckboxJavaScript