前提・実現したいこと
dbから取得した数値によってチェックボックスの数を変えて、htmlで出力することは
出来ていますが、チェックボックスの上に文字が出力されます。
チェックボックスの上の文字を消したいです。
以下のようなチェックボックスをつくりたい。(□がチェックボックス、横の数字が項目名になります)
例 □1-1 □1-2 □2-1 ・・・・
発生している問題
□のチェックボックスの上に項目名(1-1, 1-2, 2-1等)が表示される。
CSSに問題があることまでは分かったのですが、CSSのどの部分が問題なのか分からないのでCSSの該当部分を載せておきます。
該当のソースコード
HTML
1<tr class="showTargets"> 2 <th class="v_top">表示対象<em class="hissu">必須</em></th> 3 <td> 4 <div> 5 <p><input type="checkbox" name="tgt" value="all" id="tgtAll"><label for="tgtAll">全体</label></p><!-- 6 --><span class="btn b_uncheckAll">すべてのチェックを外す</span> 7 </div> 8 <div class="grade_wrapper" data-checked="1" data-classLen="10"> 9 <div class="gradeBlock"> 10 <th:block th:each="item:${checkboxItems}"> 11 <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> 12 </th:block> 13 </div> 14 </div> 15 </td> 16</tr>
CSS
1.regiNewsBox tr.showTargets{ 2 border-bottom:solid 1px #aaa; 3} 4.regiNewsBox tr.showTargets td{ 5 padding:0; 6} 7.regiNewsBox tr.showTargets td .b_uncheckAll{ 8 background: linear-gradient(-120deg, #9d9d9d 0, #787878 100%); 9 color: #fff; 10 height: 2.4vw; 11 display:inline-block; 12 width:14.5833vw; 13 text-align: center; 14 padding-top:0.9vw; 15 cursor: pointer; 16} 17.regiNewsBox tr.showTargets td > div{ 18 border-bottom:solid 1px #aaa; 19 padding: 1.458vw 0; 20} 21.regiNewsBox tr.showTargets td > div:first-child{ 22 padding-top:0; 23} 24.regiNewsBox tr.showTargets td > div:last-child{ 25 border:none; 26} 27.regiNewsBox tr.showTargets td div div:first-of-type{ 28 padding-bottom: 1.458vw; 29} 30.regiNewsBox tr.showTargets td div p:last-of-type{ 31 padding-bottom: 0; 32} 33.regiNewsBox tr.showTargets td > div .gradeBlock:last-child{ 34 padding-left:9.895vw; 35} 36.regiNewsBox tr.showTargets input{ 37 display:none; 38} 39 40 41.regiNewsBox tr.showTargets #tgtAll + label { 42 width: 9.895vw; 43} 44.regiNewsBox tr.showTargets label{ 45 width:7.3vw; 46 box-sizing: border-box; 47 display:block; 48} 49.regiNewsBox tr.showTargets label.g_all{ 50 width:9.8vw; 51} 52.regiNewsBox tr.showTargets p{ 53 position:relative; 54 display:inline-block; 55} 56.regiNewsBox tr.showTargets input{ 57 display:none; 58} 59.regiNewsBox tr.showTargets label{ 60 padding-left:5vw; 61 padding-right:2.4vw; 62 display:relative; 63 vertical-align: middle; 64} 65.regiNewsBox tr.showTargets input.g_all + label{ 66 width:9.895vw; 67 display:block; 68} 69.regiNewsBox tr.showTargets label:before{ 70 content:""; 71 display:inline-block; 72 height:1.3vw; 73 width:1.3vw; 74 border:solid 2px #bbb; 75 position:absolute; 76 left:0; 77 top:0; 78} 79 80.regiNewsBox tr.showTargets input:checked + label:before{ 81border-color:transparent; 82background: linear-gradient(-120deg, #115792 0, #252d9b 53.52%, #452d9b 100%); 83} 84.regiNewsBox tr.showTargets input:checked + label:after{ 85 content:""; 86 display:inline-block; 87 height:0.5vw; 88 width:0.9vw; 89 border-left:#fff solid 0.12vw; 90 border-bottom:#fff solid 0.12vw; 91 position:absolute; 92 left:0.3vw; 93 top:0.3vw; 94 transform:rotate(-45deg) 95} 96.regiNewsBox tr.showTargets th, 97.regiNewsBox tr.showTargets td{ 98 padding-top:1.458vw; 99}
controller
int koshuがdbから取得した数値で、koshuの分チェックボックスを出力します。
呼び出される側
Java
1private Map<String,String> getCheckBoxItems(int koshu){ 2 Map<String, String> selectMap = new LinkedHashMap<String, String>(); 3 for (int i=1; i <= koshu; i++) { 4 selectMap.put("P1-"+i, "1-"+i); 5 } 6 for (int i=1; i <= koshu; i++) { 7 selectMap.put("P2-"+i, "2-"+i); 8 } 9 return selectMap; 10}
呼び出す側
Java
1model.addAttribute("checkboxItems",getCheckBoxItems(koshu));
form
Java
1private String[] inputMultiCheck; 2 3public String[] getInputMultiCheck() { 4 return inputMultiCheck; 5} 6 7public void setInputMultiCheck(String[] inputMultiCheck) { 8 this.inputMultiCheck = inputMultiCheck; 9}
試したこと
htmlのinputタグのth:textを消すとチェックボックスの上の文字は消えたが、
チェックボックスにチェック出来なくなった。