Thymeleaf - How to add checked attribute to input conditionally

Question

As you know, input component has an attribute, checked to whether mark the checkbox as enabled by default or not.

<input type="checkbox" name="mycheckbox" checked="checked"/>

To disable the checkbox by default, the checked exception should be declared. Is it possible to set checked attribute by a flag in Thymeleaf?

Kusin

Answer 1

According to the official thymeleaf documentation

http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#fixed-value-boolean-attributes

th:checked is considered as a fixed-value Boolean attribute.

<input type="checkbox" name="active" th:checked="${user.active}" />

Where user.active should be a boolean.

So in your case it should be as Andrea mentioned,

<input type="checkbox" name="mycheckbox" th:checked="${flag}" />

Disservice

Does checkbox not work with th:field attribute? I am adding th:field and everytime the backend receives the value as false? – Augsburg

Answer 2

After digging a little, I found out the solution. There is th:checked attribute for that purpose.

This works:

<input type="checkbox" name="mycheckbox" th:checked="${flag} ? 'checked'">

This fails:

<input type="checkbox" name="mycheckbox" th:checked="${flag} ? 'checked' : ''">

If checked="" is set to input component, it's marked checked. This method is valid for custom attributesth:attr also. Consider following example:

<p th:attr="customattr=${flag}?'attr'></p>

If flag is true, it's replaced with:

<p customattr="attr"></p>

If flag is false, it's replaced with:

<p></p>

Kusin

simply th:checked=${flag}, is more concise for checked attribute – Drysalt

@Drysalt is it possible to do a comparison i.e. th:checked="${model.myField == null}" ? – Layman

how to i set flag as true? – Transpolar

Flag is set in request handler, in a class like `UserController`` @Jesse – Kusin

Answer 3

You can conditionally add checked attribute to radio input in thymeleaf as below:

 <input type="radio" th:checked="${sales.sales_head.sales_type} == CREDIT" class="sales_type" value="CREDIT"  name="sales_type" >

Here if sales_type is CREDIT the radio will be checked. Otherwise it remains unchecked.

Yate

Answer 4

Thymeleaf th:checked attribute is fixed-value attribute and it does not toggle the boolean value on checking or unchecking the box.

To toggle the boolean value for backend use, use 'th:field attribute with the syntax: th:field="${object.attribute}"

A working code snippet that i used in my project is given here as exmple:

<form action="#" th:action="@{/editNotificationAlerts}" th:object="${userObject}" method="post">

      <label for="sendEmailNotification">Notify At 80</label>
      <input type="checkbox" name="sendEmailNotification" id="sendEmailNotification" th:field="${userObject.sendEmailNotification}">

<div>
     <input type="submit" value="Submit"/>
</div>

</form>

The toggled value shall be passed to controller on submit action.

Knifeedged

Answer 5

Neither suggested solutions worked for me.

This one worked:

th:checked="${#strings.equals(param.myRequestParameterXYZ, 'foobar')}"

Sirdar

Answer 6

I faced problem for showing checkbox (tick mark on/off) in thymeleaf based on true or false value for the property. I solved it by following way.

Method in controller

@RequestMapping(value = "/test")
public String showCheckbox(Model model) {
 boolean myBooleanVariable = false;
 model.addAttribute("myBooleanVariable", myBooleanVariable);
 return "sample-checkbox";
}

In HTML page:

<input type="checkbox" name="myBooleanVariable" th:checked="${myBooleanVariable}"/>

Speculum

Answer 7

If you have a form that is a model representation, say foo, and bar is a checkbox on your form and property of foo (e.g. foo.bar):

<form th:object="${foo}">
    <input type="checkbox" th:field="*{bar}" th:value="*{bar}"></input>
</form>

...will also work and presents a succinct approach.

Gilberto

Answer 8

You can also use Logical and / or conditions with it like

th:checked="${business?.status == true or business?.status == null}"

Caddie