Thymeleafのチェックボックスで選択時はTRUE、未選択時はFALSEをサーバに送りたい

Question

前提・実現したいこと

タイトルの通り、
Timeleafのチェックボックスで選択時はTRUE、未選択時はFALSEをサーバに送る処理を実現させたいです。
以下にソースを記載していますが、
現状チェックボックスが3つあった場合に1つ目と3つ目を選択している時は
true
false
false
true
false
とサーバに値が飛んできてしまいます。

これを
true
false
true
とさせたいです。

知識がある方、ご教示をお願い致します。

該当のソースコード

<th:block th:each="data :${checkboxItems}">
<input type="checkbox" name="check_box" th:value="TRUE"/>
<input type="hidden" name="check_box" th:value="FALSE" />
</th:block>

Answer 1

チェックボックスで値を送信するときは、nameとvalueの組み合わせが一緒のものがあると、どの値がチェックされて送信されているのかが不明になります。

ですので、nameに番号をつけるか、valueに番号をつけるかのどちらかになりますが、簡単なのは valueに番号をつけることです。

<div th:each="check, iterStat : ${checks}">
  <input type="checkbox" name="checks" th:checked="${check}" th:value="${iterStat.index}">
</div>

こうすることで、例えば checks の内容が

List<Boolean> checks = Arrays.asList(Boolean.TRUE, Boolean.FALSE);

の場合には、上記のhtmlテンプレートは、以下のように出力されます。

<div>
  <input type="checkbox" name="checks" checked="checked" value="0">
  <input type="checkbox" name="checks" value="1">
</div>

これを送信したものを受け取るControllerでは、例えば

	@PostMapping("")
	public ModelAndView post(ModelAndView mnv, @RequestParam(required=false) List<Integer> checks) {
		log.info(checks);

		if (checks == null) {
			checks = new ArrayList<>();
		}

		List<Boolean> outputChecks = outputChecks(checks);

		mnv.setViewName("checkbox");
		mnv.addObject("checks", outputChecks);
		return mnv;
	}

	private List<Boolean> outputChecks(List<Integer> checks) {
		return IntStream.range(0, 2).boxed().map(i -> checks.contains(i)).collect(Collectors.toList());
	}

とすれば何番目のチェックボックスに対してチェックされているのかが確認できるでしょう。

このControllerでは、チェックボックスの最大サイズを2と固定していますが、表示されているチェックボックスの数も受け取れるようにすれば良いでしょう。

Answer 2

Thymeleafを知らないのですが, 例えば次のような構造をとることは可能でしょうか？

input[type="hidden"]のノードにのみname属性を持たせフォームの送信対象としています.（初期値の持たせ方等を考慮する必要がありますが）

<div>
	<input type="checkbox" onchange="
		this.parentNode.querySelector('[type=&quot;hidden&quot;]').value = this.checked;
	"/>
	<input type="hidden" name="check_box"/>
</div>