teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問[spring boot][Java][HTML] チェックボックスの表示

編集履歴

質問編集履歴

4

controllerのIDの部分を修正(IDの最初を文字から始めるように修正)

2020/07/06 00:35

投稿

rwatanabe
rwatanabe

スコア2

test CHANGED
File without changes
test CHANGED
@@ -284,13 +284,13 @@
284
284
 
285
285
  for (int i=1; i <= koshu; i++) {
286
286
 
287
- selectMap.put("1-"+i, "1-"+i);
287
+ selectMap.put("P1-"+i, "1-"+i);
288
288
 
289
289
  }
290
290
 
291
291
  for (int i=1; i <= koshu; i++) {
292
292
 
293
- selectMap.put("2-"+i, "2-"+i);
293
+ selectMap.put("P2-"+i, "2-"+i);
294
294
 
295
295
  }
296
296
 

3

HTML, CSSの該当部分を追加

2020/07/06 00:35

投稿

rwatanabe
rwatanabe

スコア2

test CHANGED
File without changes
test CHANGED
@@ -268,8 +268,6 @@
268
268
 
269
269
  ```
270
270
 
271
-
272
-
273
271
  controller
274
272
 
275
273
  int koshuがdbから取得した数値で、koshuの分チェックボックスを出力します。
@@ -300,9 +298,9 @@
300
298
 
301
299
  }
302
300
 
303
-
304
-
305
- ```
301
+ ```
302
+
303
+
306
304
 
307
305
  呼び出す側
308
306
 
@@ -312,6 +310,8 @@
312
310
 
313
311
  ```
314
312
 
313
+
314
+
315
315
  form
316
316
 
317
317
  ```Java

2

CSSの該当部分を追加

2020/07/06 00:29

投稿

rwatanabe
rwatanabe

スコア2

test CHANGED
File without changes
test CHANGED
@@ -22,6 +22,8 @@
22
22
 
23
23
  □のチェックボックスの上に項目名(1-1, 1-2, 2-1等)が表示される。
24
24
 
25
+ CSSに問題があることまでは分かったのですが、CSSのどの部分が問題なのか分からないのでCSSの該当部分を載せておきます。
26
+
25
27
 
26
28
 
27
29
  ### 該当のソースコード
@@ -30,13 +32,243 @@
30
32
 
31
33
  ```HTML
32
34
 
33
- <th:block th:each="item:${checkboxItems}">
34
-
35
- 　<p><input type="checkbox" name="inputMultiCheck" th:id="${item.key}"　th:value="${item.key}" th:text="${item.value}" class="_cb" th:field="*{inputMultiCheck}"><label th:for="${item.key}" th:text="${item.value}"></label></p>
36
-
37
- </th:block>
38
-
39
- ```
35
+ <tr class="showTargets">
36
+
37
+ <th class="v_top">表示対象<em class="hissu">必須</em></th>
38
+
39
+ <td>
40
+
41
+ <div>
42
+
43
+ <p><input type="checkbox" name="tgt" value="all" id="tgtAll"><label for="tgtAll">全体</label></p><!--
44
+
45
+ --><span class="btn b_uncheckAll">すべてのチェックを外す</span>
46
+
47
+ </div>
48
+
49
+ <div class="grade_wrapper" data-checked="1" data-classLen="10">
50
+
51
+ <div class="gradeBlock">
52
+
53
+ <th:block th:each="item:${checkboxItems}">
54
+
55
+ <p><input type="checkbox" name="inputMultiCheck" th:id="${item.key}" th:value="${item.key}" th:text="${item.value}" class="_cb" th:field="*{inputMultiCheck}"><label th:for="${item.key}"></label></p>
56
+
57
+ </th:block>
58
+
59
+ </div>
60
+
61
+ </div>
62
+
63
+ </td>
64
+
65
+ </tr>
66
+
67
+ ```
68
+
69
+ ```CSS
70
+
71
+ .regiNewsBox tr.showTargets{
72
+
73
+ border-bottom:solid 1px #aaa;
74
+
75
+ }
76
+
77
+ .regiNewsBox tr.showTargets td{
78
+
79
+ padding:0;
80
+
81
+ }
82
+
83
+ .regiNewsBox tr.showTargets td .b_uncheckAll{
84
+
85
+ background: linear-gradient(-120deg, #9d9d9d 0, #787878 100%);
86
+
87
+ color: #fff;
88
+
89
+ height: 2.4vw;
90
+
91
+ display:inline-block;
92
+
93
+ width:14.5833vw;
94
+
95
+ text-align: center;
96
+
97
+ padding-top:0.9vw;
98
+
99
+ cursor: pointer;
100
+
101
+ }
102
+
103
+ .regiNewsBox tr.showTargets td > div{
104
+
105
+ border-bottom:solid 1px #aaa;
106
+
107
+ padding: 1.458vw 0;
108
+
109
+ }
110
+
111
+ .regiNewsBox tr.showTargets td > div:first-child{
112
+
113
+ padding-top:0;
114
+
115
+ }
116
+
117
+ .regiNewsBox tr.showTargets td > div:last-child{
118
+
119
+ border:none;
120
+
121
+ }
122
+
123
+ .regiNewsBox tr.showTargets td div div:first-of-type{
124
+
125
+ padding-bottom: 1.458vw;
126
+
127
+ }
128
+
129
+ .regiNewsBox tr.showTargets td div p:last-of-type{
130
+
131
+ padding-bottom: 0;
132
+
133
+ }
134
+
135
+ .regiNewsBox tr.showTargets td > div .gradeBlock:last-child{
136
+
137
+ padding-left:9.895vw;
138
+
139
+ }
140
+
141
+ .regiNewsBox tr.showTargets input{
142
+
143
+ display:none;
144
+
145
+ }
146
+
147
+
148
+
149
+
150
+
151
+ .regiNewsBox tr.showTargets #tgtAll + label {
152
+
153
+ width: 9.895vw;
154
+
155
+ }
156
+
157
+ .regiNewsBox tr.showTargets label{
158
+
159
+ width:7.3vw;
160
+
161
+ box-sizing: border-box;
162
+
163
+ display:block;
164
+
165
+ }
166
+
167
+ .regiNewsBox tr.showTargets label.g_all{
168
+
169
+ width:9.8vw;
170
+
171
+ }
172
+
173
+ .regiNewsBox tr.showTargets p{
174
+
175
+ position:relative;
176
+
177
+ display:inline-block;
178
+
179
+ }
180
+
181
+ .regiNewsBox tr.showTargets input{
182
+
183
+ display:none;
184
+
185
+ }
186
+
187
+ .regiNewsBox tr.showTargets label{
188
+
189
+ padding-left:5vw;
190
+
191
+ padding-right:2.4vw;
192
+
193
+ display:relative;
194
+
195
+ vertical-align: middle;
196
+
197
+ }
198
+
199
+ .regiNewsBox tr.showTargets input.g_all + label{
200
+
201
+ width:9.895vw;
202
+
203
+ display:block;
204
+
205
+ }
206
+
207
+ .regiNewsBox tr.showTargets label:before{
208
+
209
+ content:"";
210
+
211
+ display:inline-block;
212
+
213
+ height:1.3vw;
214
+
215
+ width:1.3vw;
216
+
217
+ border:solid 2px #bbb;
218
+
219
+ position:absolute;
220
+
221
+ left:0;
222
+
223
+ top:0;
224
+
225
+ }
226
+
227
+
228
+
229
+ .regiNewsBox tr.showTargets input:checked + label:before{
230
+
231
+ border-color:transparent;
232
+
233
+ background: linear-gradient(-120deg, #115792 0, #252d9b 53.52%, #452d9b 100%);
234
+
235
+ }
236
+
237
+ .regiNewsBox tr.showTargets input:checked + label:after{
238
+
239
+ content:"";
240
+
241
+ display:inline-block;
242
+
243
+ height:0.5vw;
244
+
245
+ width:0.9vw;
246
+
247
+ border-left:#fff solid 0.12vw;
248
+
249
+ border-bottom:#fff solid 0.12vw;
250
+
251
+ position:absolute;
252
+
253
+ left:0.3vw;
254
+
255
+ top:0.3vw;
256
+
257
+ transform:rotate(-45deg)
258
+
259
+ }
260
+
261
+ .regiNewsBox tr.showTargets th,
262
+
263
+ .regiNewsBox tr.showTargets td{
264
+
265
+ padding-top:1.458vw;
266
+
267
+ }
268
+
269
+ ```
270
+
271
+
40
272
 
41
273
  controller
42
274
 

1

追加情報　thymeleaf

2020/07/06 00:25

投稿

rwatanabe
rwatanabe

スコア2

test CHANGED
@@ -1 +1 @@
1
- [spring boot][Java][HTML] チェックボックスについて
1
+ [spring boot][Java][HTML] チェックボックスの表示
test CHANGED
File without changes