Thymeleaf: populating checkboxes from an Array

Question

I have a Spring MVC application using Thymeleaf for templating. I am using enums to generate checkboxes dynamically. So if my enum file has 3 values it will generate 3 checkboxes:

My enum file:

public enum Foods {

    PIZZA("Pizza"),
    PASTA("Pasta"),
    MAC_CHEESE("Mac and Cheese"),
    ICE_CREAM("Ice Cream"),
    BURGER("Burger"),

    private String type;

    Foods(String type) {
        this.type = type;
    }

    public String getType() {
        return this.type;
    }

}

This is my checkbox generation:

<label for="decision">What is your favorite food?</label>
<div id="decision" class="row" style="margin-top:1%;">
    <div class="col-md-4" th:each="option : ${T(in.app.model.enums.Foods).values()}">
        <div class="checkbox checkbox-custom checkbox-circle">
            <input name="decision" type="checkbox" th:id="${option.toString()}" th:value="${option}" />
            <label th:for="${option.toString()}" th:text="${option.type}"></label>
        </div>
    </div>
</div>

This code will generate 5 checkboxes for each of the food type. All works till here. The issue I am facing is how to set the checked attribute when reading a saved record.

I am getting back an object via the model view controller. The object has a food property with its value as the array of the chosen food types.

user = {
   .
   .
   food : ["PIZZA", "BURGER", "PASTA"],
   .
   .
}

Now I want to loop through this array and if the value match then set the checkbox.

I am trying to do something like this:

<label for="decision">What is your favorite food?</label>
<div id="decision" class="row" style="margin-top:1%;">
    <div class="col-md-4" th:each="option : ${T(in.app.model.enums.Foods).values()}">
        <div class="checkbox checkbox-custom checkbox-circle">
            <input 
                name="decision" 
                type="checkbox" 
                th:id="${option.toString()}" 
                th:value="${option}" 
                th:each="food : ${user.food}"
                th:attr="checked = ${food} == ${option} ? 'checked'"
            />
            <label th:for="${option.toString()}" th:text="${option.type}"></label>
        </div>
    </div>
</div>

I know its wrong (since its not working) but I am unable to figure out how to loop over two arrays to show the checkboxes and to check them.

Could you post what is being output by the application, or any errors associate with it from thymeleaf? — Artichoke, Jul 31 '18 at 13:46

Artichoke · Answer 1 · 2018-07-31T13:44:04.703

You might want to try using th:checked instead of th:attr if you can, so:

th:checked="${food == option.type}"

This post might also be helpful when looking into that. If you can't use th:checked, switching to the below statement should also work.

th:attr="checked=${food == option.type} ? 'checked'"

It also seems like you may run into some issues with checking this data due to case sensitivity while comparing, in which case this post might be helpful.

score 0 · Answer 2 · answered Apr 12 '22 at 12:19

The safe option is to go with

th:attr

and do compare like @Artichoke

th:attr="checked=${food == option.type} ? 'checked'"

The problem with "th:checked" is, its simply do not go well when you need to post the data unless you change the value. You see its value as null if you do not switch it.

Thymeleaf: populating checkboxes from an Array

2 Answers2