Precautions when using checkboxes in Thymeleaf

Here are some points I was addicted to when using checkboxes in Thymeleaf!

In general, I think that it is common to specify a property in th: field and output it. If you specify a bean in th: object, it will be bound automatically, so if you simply output it, you can keep the checked state in the quickest and easiest way.

When using th: field

You can specify the property defined in the Bean specified by th: object and output it as a check box.

The biggest point is to output a check box and at the same time output hidden with an underscore at the beginning of the parameter name. The parameter output by hidden is sent even when the check box is not selected, so the Spring side handles it as false. (By the way, it is the same when using Spring tag library in JSP, so I feel that the specifications of Spring Framework have an influence.)

When you actually output about 2 patterns by type, it looks like this.

■ When outputting using boolean properties

<input type="checkbox" th:field="*{checkBoo}">

• HTML that is actually output

<input type="checkbox" id="checkBoo1" name="checkBoo" value="true">
<input type="hidden" name="_checkBoo" value="on">

■ When outputting using the property of String

<input type="checkbox" th:field="*{checkStr}" th:value="on" >

• HTML that is actually output

<input type="checkbox" value="on" id="checkStr1" name="checkStr">
<input type="hidden" name="_checkStr" value="on">

When developing a new one, I think that it can work without problems by describing it according to such general manners. However, when migrating from another framework, the original specifications may be different, so it seems that it may be a problem if hidden is output and treated as false.

How to prevent hidden from being output automatically?

In conclusion, it's best to avoid using th: field. You can also serve as a checkbox by simply using the name attribute.

However, instead of no longer outputting hidden, it becomes impossible to judge the check status that th: field was automatically performing. (Because the property of the bean specified in th: object is no longer bound) It will be a little redundant, but it is possible to judge by another method and keep the checked state.

■ When outputting using boolean properties

<form th:action="@{/check}" th:object="${form}" method="POST">
	<input type="checkbox" name="checkBoo" th:checked="${form.checkBoo}">
</form>

• HTML that is actually output

<form action="/context-path/check" method="POST">
	<input type="checkbox" name="checkBoo" checked="checked">
</form>

■ When outputting using the property of String

<form th:action="@{/check}" th:object="${form}" method="POST">
	<input type="checkbox" name="checkStr" th:value="on" th:checked="${form.checkStr eq 'on'}">
</form>

• HTML that is actually output

<form action="/context-path/check" method="POST">
	<input type="checkbox" name="checkStr" value="on" checked="checked">
</form>

In the above example, if the type is boolean, it is not true. If it is String, if it is not the value specified in the value attribute, it will naturally judge that the checked attribute is not output. I think it's a good idea to use this style of writing as needed.

Summary

Depending on how you write it, the value will be POSTed even if the checkbox is not selected, so it will affect depending on the internal implementation. One of the patterns I encountered was that the parameters sent in hidden affected the implementation of the String Converter customization.

It's a part of creating a web application, but I think it's a good thing to know. I hope it will be helpful as a trivia of Thymeleaf.

reference

http://se-bikou.blogspot.com/2018/05/spring-mvcthymeleafcheckbox.html

https://docs.spring.io/spring-framework/docs/2.0.x/reference/mvc.html#mvc-formtaglib-checkboxtag