teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

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

2020/07/06 00:35

投稿

rwatanabe
rwatanabe

スコア2

title CHANGED
File without changes
body CHANGED
@@ -141,10 +141,10 @@
141
141
  private Map<String,String> getCheckBoxItems(int koshu){
142
142
  Map<String, String> selectMap = new LinkedHashMap<String, String>();
143
143
  for (int i=1; i <= koshu; i++) {
144
- selectMap.put("1-"+i, "1-"+i);
144
+ selectMap.put("P1-"+i, "1-"+i);
145
145
  }
146
146
  for (int i=1; i <= koshu; i++) {
147
- selectMap.put("2-"+i, "2-"+i);
147
+ selectMap.put("P2-"+i, "2-"+i);
148
148
  }
149
149
  return selectMap;
150
150
  }

3

HTML, CSSの該当部分を追加

2020/07/06 00:35

投稿

rwatanabe
rwatanabe

スコア2

title CHANGED
File without changes
body CHANGED
@@ -133,7 +133,6 @@
133
133
  padding-top:1.458vw;
134
134
  }
135
135
  ```
136
-
137
136
  controller
138
137
  int koshuがdbから取得した数値で、koshuの分チェックボックスを出力します。
139
138
 
@@ -149,12 +148,13 @@
149
148
  }
150
149
  return selectMap;
151
150
  }
151
+ ```
152
152
 
153
- ```
154
153
  呼び出す側
155
154
  ```Java
156
155
  model.addAttribute("checkboxItems",getCheckBoxItems(koshu));
157
156
  ```
157
+
158
158
  form
159
159
  ```Java
160
160
  private String[] inputMultiCheck;

2

CSSの該当部分を追加

2020/07/06 00:29

投稿

rwatanabe
rwatanabe

スコア2

title CHANGED
File without changes
body CHANGED
@@ -10,14 +10,130 @@
10
10
  ### 発生している問題
11
11
 
12
12
  □のチェックボックスの上に項目名(1-1, 1-2, 2-1等)が表示される。
13
+ CSSに問題があることまでは分かったのですが、CSSのどの部分が問題なのか分からないのでCSSの該当部分を載せておきます。
13
14
 
14
15
  ### 該当のソースコード
15
16
 
16
17
  ```HTML
17
- <th:block th:each="item:${checkboxItems}">
18
-  <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>
19
- </th:block>
18
+ <tr class="showTargets">
19
+ <th class="v_top">表示対象<em class="hissu">必須</em></th>
20
+ <td>
21
+ <div>
22
+ <p><input type="checkbox" name="tgt" value="all" id="tgtAll"><label for="tgtAll">全体</label></p><!--
23
+ --><span class="btn b_uncheckAll">すべてのチェックを外す</span>
24
+ </div>
25
+ <div class="grade_wrapper" data-checked="1" data-classLen="10">
26
+ <div class="gradeBlock">
27
+ <th:block th:each="item:${checkboxItems}">
28
+ <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>
29
+ </th:block>
30
+ </div>
31
+ </div>
32
+ </td>
33
+ </tr>
20
34
  ```
35
+ ```CSS
36
+ .regiNewsBox tr.showTargets{
37
+ border-bottom:solid 1px #aaa;
38
+ }
39
+ .regiNewsBox tr.showTargets td{
40
+ padding:0;
41
+ }
42
+ .regiNewsBox tr.showTargets td .b_uncheckAll{
43
+ background: linear-gradient(-120deg, #9d9d9d 0, #787878 100%);
44
+ color: #fff;
45
+ height: 2.4vw;
46
+ display:inline-block;
47
+ width:14.5833vw;
48
+ text-align: center;
49
+ padding-top:0.9vw;
50
+ cursor: pointer;
51
+ }
52
+ .regiNewsBox tr.showTargets td > div{
53
+ border-bottom:solid 1px #aaa;
54
+ padding: 1.458vw 0;
55
+ }
56
+ .regiNewsBox tr.showTargets td > div:first-child{
57
+ padding-top:0;
58
+ }
59
+ .regiNewsBox tr.showTargets td > div:last-child{
60
+ border:none;
61
+ }
62
+ .regiNewsBox tr.showTargets td div div:first-of-type{
63
+ padding-bottom: 1.458vw;
64
+ }
65
+ .regiNewsBox tr.showTargets td div p:last-of-type{
66
+ padding-bottom: 0;
67
+ }
68
+ .regiNewsBox tr.showTargets td > div .gradeBlock:last-child{
69
+ padding-left:9.895vw;
70
+ }
71
+ .regiNewsBox tr.showTargets input{
72
+ display:none;
73
+ }
74
+
75
+
76
+ .regiNewsBox tr.showTargets #tgtAll + label {
77
+ width: 9.895vw;
78
+ }
79
+ .regiNewsBox tr.showTargets label{
80
+ width:7.3vw;
81
+ box-sizing: border-box;
82
+ display:block;
83
+ }
84
+ .regiNewsBox tr.showTargets label.g_all{
85
+ width:9.8vw;
86
+ }
87
+ .regiNewsBox tr.showTargets p{
88
+ position:relative;
89
+ display:inline-block;
90
+ }
91
+ .regiNewsBox tr.showTargets input{
92
+ display:none;
93
+ }
94
+ .regiNewsBox tr.showTargets label{
95
+ padding-left:5vw;
96
+ padding-right:2.4vw;
97
+ display:relative;
98
+ vertical-align: middle;
99
+ }
100
+ .regiNewsBox tr.showTargets input.g_all + label{
101
+ width:9.895vw;
102
+ display:block;
103
+ }
104
+ .regiNewsBox tr.showTargets label:before{
105
+ content:"";
106
+ display:inline-block;
107
+ height:1.3vw;
108
+ width:1.3vw;
109
+ border:solid 2px #bbb;
110
+ position:absolute;
111
+ left:0;
112
+ top:0;
113
+ }
114
+
115
+ .regiNewsBox tr.showTargets input:checked + label:before{
116
+ border-color:transparent;
117
+ background: linear-gradient(-120deg, #115792 0, #252d9b 53.52%, #452d9b 100%);
118
+ }
119
+ .regiNewsBox tr.showTargets input:checked + label:after{
120
+ content:"";
121
+ display:inline-block;
122
+ height:0.5vw;
123
+ width:0.9vw;
124
+ border-left:#fff solid 0.12vw;
125
+ border-bottom:#fff solid 0.12vw;
126
+ position:absolute;
127
+ left:0.3vw;
128
+ top:0.3vw;
129
+ transform:rotate(-45deg)
130
+ }
131
+ .regiNewsBox tr.showTargets th,
132
+ .regiNewsBox tr.showTargets td{
133
+ padding-top:1.458vw;
134
+ }
135
+ ```
136
+
21
137
  controller
22
138
  int koshuがdbから取得した数値で、koshuの分チェックボックスを出力します。
23
139
 

1

追加情報 thymeleaf

2020/07/06 00:25

投稿

rwatanabe
rwatanabe

スコア2

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