質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

2527閲覧

Thymeleafでチェックボックスで選択した値をjavaに渡したい

takahiro00

総合スコア84

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/06/08 15:08

編集2020/06/09 12:44

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/06/08 20:23

ImgSelectFormの定義もご提示ください。
m.ts10806

2020/06/08 20:24

あと、kijiListの内容も
takahiro00

2020/06/09 12:42

はい。 追加しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問