1. Overview
Thymeleaf is a modern Java template engine for building web environments. It’s ideal for modern HTML web development. Also, Thymeleaf works perfectly well with Spring Boot.
In this tutorial, we’ll learn how to conditionally add a checked attribute to input in Thymeleaf.
2. Using th:checked Attribute
Thymeleaf standard dialect allows us to conditionally add fixed-value boolean attributes to any element of an HTML document. One of these attributes is th:checked, which is the equivalent of the checked attribute in HTML.
The th:checked attribute is used with any input of type checkbox in HTML documents. Also, it accepts any expression of Boolean type, which is evaluated as true or false.
For instance, to decide whether a checkbox is checked or not, the Thymeleaf engine evaluates the specified condition in the th:checked attribute. If the condition evaluates true, then the checkbox will be checked. If the condition evaluates false, then the checkbox will be unchecked.
3. Example
Let’s see through a practical example how Thymeleaf’s th:checked attribute works. First, we’ll define a Spring controller:
@Controller
public class AttributeController {
@GetMapping("/checked")
public String displayCheckboxForm(Model model) {
Engine engine = new Engine(true);
model.addAttribute("engine", engine);
model.addAttribute("flag", true);
return "attribute/index";
}
private static class Engine {
private Boolean active;
public Engine(Boolean active) {
this.active = active;
}
public Boolean getActive() {
return active;
}
}
}
Our controller allows initiating two variables, one of type Boolean that we named “flag”, and another object Engine that contains an attribute of type Boolean that we named “active”. Let’s use these two variables in a template to see how we can instruct Thymeleaf to conditionally activate or deactivate checkboxes using th:checked:
<form method="post">
<label>
<input type="checkbox" th:checked="${flag}"/> Flag activated
</label>
<label>
<input type="checkbox" th:checked="${engine.getActive()}"/> Customer activated
</label>
<label>
<input type="checkbox" th:checked="${flag ? false: true}"/> Flag deactivated
</label>
</form>
In our template, we use the flag variable and engine.active attribute to set up the checkboxes. As we initiated these variables to true in our controller, the first and second checkboxes are activated, and the third is deactivated because our conditional expression evaluates to false.
4. Conclusion
In this quick tutorial, we discovered the use of the checked attribute in Thymeleaf. Through a practical example, we also learned how to add checked attributes to input conditionally in Thymeleaf.
A working version of the code shown in this article is available on GitHub.
