前提・実現したいこと
Thymeleafでチェックボックスを作成して、
選択した値をjava(SpringBoot)に渡したいのですが、
選択してない値もjavaが取得してしまいます。。。。
チェックボックスは以下のサイトを参考にして、javascriptを用いて
画像の上にチェックが出るようにしています。
リンク内容
ご教授いただければと思います。
該当のソースコード
HTML
1<form method="post" th:action="@{/kiji-upd}" th:object="${form}"> 2 <table> 3 <thead><tr><th>元画像</th></tr></thead> 4 <tbody class="image_list"><tr th:each="obj2 : ${kijiList}"> 5 <td><img th:src="${obj2.motoImgUrl}" th:class="thumbnail"></td> 6 <td><input type="hidden" th:name="'img'+${obj2.num}" th:value="${obj2.kijiNo}"></td> 7 <td> 8 <div class="image_box"> 9 <img th:src="${obj2.imgUrl1}" th:class="'thumbnail'+${obj2.num}"> 10 <input class="disabled_checkbox" type="checkbox" checked th:value="${obj2.imgUrl1}" th:name="'imgSelect'+${obj2.num}"/> 11 </div> 12 </td> 13 <td> 14 <div class="image_box"> 15 <img th:src="${obj2.imgUrl2}" th:class="'thumbnail'+${obj2.num}"> 16 <input class="disabled_checkbox" type="checkbox" checked th:value="${obj2.imgUrl1}" th:name="'imgSelect'+${obj2.num}"/> 17 </div> 18 </td> 19 <td> 20 <div class="image_box"> 21 <img th:src="${obj2.imgUrl3}" th:class="'thumbnail'+${obj2.num}"> 22 <input class="disabled_checkbox" type="checkbox" checked th:value="${obj2.imgUrl1}" th:name="'imgSelect'+${obj2.num}"/> 23 </div> 24 </td> 25 </tr> 26 </tbody> 27 </table> 28 <input type="submit" class="submit" value="登録"> 29</form>
javascript
1$(function() { 2 // チェックボックスのクリックを無効化します。 3 $('.image_box .disabled_checkbox').click(function() { 4 return false; 5 }); 6 7 // 画像がクリックされた時の処理です。 8 $('img.thumbnail1').click(function() { 9 var $imageList = $('.image_list'); 10 11 // 現在の選択を解除します。 12 $imageList.find('img.thumbnail1.checked').removeClass('checked'); 13 14 // チェックを入れた状態にします。 15 $(this).addClass('checked'); 16 }); 17 // 画像がクリックされた時の処理です。 18 $('img.thumbnail2').click(function() { 19 var $imageList = $('.image_list'); 20 21 // 現在の選択を解除します。 22 $imageList.find('img.thumbnail2.checked').removeClass('checked'); 23 24 // チェックを入れた状態にします。 25 $(this).addClass('checked'); 26 }); 27 // 画像がクリックされた時の処理です。 28 $('img.thumbnail3').click(function() { 29 var $imageList = $('.image_list'); 30 31 // 現在の選択を解除します。 32 $imageList.find('img.thumbnail3.checked').removeClass('checked'); 33 34});
java
1 @RequestMapping(value = "/kiji-upd", method = RequestMethod.POST) 2 public ModelAndView kijiUpd(@ModelAttribute ImgSelectForm imgSelectForm, BindingResult bindingResult, ModelAndView mav) { 3 System.out.println(imgSelectForm); 4 return null; 5 }
↓ImgSelectForm
java
1package com.Project.entity; 2 3public class ImgSelectForm { 4 //画像記事No 5 private String img1; 6 private String img2; 7 private String img3; 8 private String img4; 9 private String img5; 10 private String img6; 11 private String img7; 12 private String img8; 13 private String img9; 14 private String img10; 15 //選択画像URL 16 private String imgSelect1; 17 private String imgSelect2; 18 private String imgSelect3; 19 private String imgSelect4; 20 private String imgSelect5; 21 private String imgSelect6; 22 private String imgSelect7; 23 private String imgSelect8; 24 private String imgSelect9; 25 private String imgSelect10; 26 ~~以下getter,setter~~ 27} 28
↓kijiListの中身
java
1package com.Project.entity; 2 3public class TopForm { 4 //連番 5 private int num; 6 //記事No 7 private String kijiNo; 8 //編集ページURL 9 private String editPageUrl; 10 //元サムネイル画像URL 11 private String motoImgUrl; 12 //DMM or MGS 13 private int dOrm; 14 // 画像URLリスト 15 private int imgUrlList[]; 16 //画像 17 private String imgUrl1; 18 private String imgUrl2; 19 private String imgUrl3; 20 private String imgUrl4; 21 private String imgUrl5; 22 private String imgUrl6; 23 private String imgUrl7; 24 private String imgUrl8; 25 private String imgUrl9; 26 private String imgUrl10; 27 private String imgUrl11; 28 private String imgUrl12; 29 private String imgUrl13; 30 private String imgUrl14; 31 private String imgUrl15; 32 private String imgUrl16; 33 private String imgUrl17; 34 private String imgUrl18; 35 private String imgUrl19; 36 private String imgUrl20; 37 private String imgUrl21; 38 private String imgUrl22; 39 private String imgUrl23; 40 private String imgUrl24; 41 private String imgUrl25; 42~~以下getter,setter~~ 43} 44
あなたの回答
tips
プレビュー