Thymeleafでラジオボタンとチェックボックスを実装する
当サイトはアフィリエイト広告を利用しています。
Thymeleafを書籍で学びたい方やThymeleafと一緒にSpringも習得したい方におすすめな書籍です。
Springについての書籍ですが、Thymeleafの基本構文や他システムとの連携など30ページほど取り上げられています。
ThymeleafとSpringは親和性の高い技術なので、これを機にSpringを学んでみるのはいかがでしょうか？
ポチップ
実行環境
実行環境がない方は、こちらの記事を参考にしてください。
| 項目 | バージョン |
|---|---|
| OS | macOS Catalina |
| JDK | Oracle JDK@8 |
| Thymeleaf | 3.1 |
Thymeleafでラジオボタンとチェックボックスを実装する
ラジオボタン
ラジオボタンの初期値は th:checked で実装します。active が指定した値と一致する場合、初期状態でチェックされた状態になります。
<div>
<label>
<input type="radio" name="department" value="100" th:checked="${active == '100'}" />
管理部
</label>
</div>
<div>
<label>
<input type="radio" name="department" value="200" th:checked="${active == '200'}" />
人事部
</label>
</div>
<div>
<label>
<input type="radio" name="department" value="300" th:checked="${active == '300'}" />
営業部
</label>
</div>
<div>
<label>
<input type="radio" name="department" value="800" th:checked="${active == '800'}" />
情報システム部
</label>
</div>チェックボックス
チェックボックスの初期値は th:checked で実装します。actives に指定した値が含まれている場合、初期状態でチェックされた状態になります。
チェックボックスは複数選択が可能なため、複数の初期値があることを想定して #lists.contains を使用していますが、th:checked="${active == 値}" を使用しても問題ありません。
#lists はこちらの記事で紹介しています。
<div>
<label>
<input type="checkbox" name="position" value="10" th:checked="${#lists.contains(actives, '10')}" />
部長
</label>
</div>
<div>
<label>
<input type="checkbox" name="position" value="20" th:checked="${#lists.contains(actives, '20')}" />
一般社員
</label>
</div>
<div>
<label>
<input type="checkbox" name="position" value="30" th:checked="${#lists.contains(actives, '30')}" />
派遣社員
</label>
</div>th:eachを使用したラジオボタン
th:each="department : ${departments}" でマップの要素を department という変数に格納します。格納後、th:text="${department.value}" でラベルを表示します。
ラジオボタンの初期値は th:checked で実装します。active が department.key と一致する場合、初期状態でチェックされた状態になります。
th:each はこちらの記事で紹介しています。
<div th:each="department : ${departments}">
<label>
<input type="radio" name="department-iteration" th:value="${department.key}" th:checked="${active == department.key}" />
<th:block th:text="${department.value}"></th:block>
</label>
</div>th:eachを使用したチェックボックス
th:each="position : ${positions}" でマップの要素を position という変数に格納します。格納後、th:text="${position.value}" でラベルを表示します。
チェックボックスの初期値は th:checked で実装します。actives に position.key が含まれている場合、初期状態でチェックされた状態になります。
チェックボックスは複数選択が可能なため、複数の初期値があることを想定して #lists.contains を使用していますが、th:checked="${active == position.key}" を使用しても問題ありません。
th:each はこちらの記事、#lists はこちらの記事で紹介しています。
<div th:each="position : ${positions}">
<label>
<input type="checkbox" name="position-iteration" th:value="${position.key}" th:checked="${#lists.contains(actives, position.key)}" />
<th:block th:text="${position.value}"></th:block>
</label>
</div>お疲れさまでした
Thymeleafでラジオボタンとチェックボックスを実装する方法を紹介しました。
少しでも参考になれば幸いです。