'Thymeleaf - How to add checked attribute to input conditionally

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?

htmlthymeleafhtml-input


Solution 1:[1]

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>

Solution 2:[2]

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.

Solution 3:[3]

Neither suggested solutions worked for me.

This one worked:

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

Solution 4:[4]

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}"/>

Solution 5:[5]

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.

Solution 6:[6]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mtyurt
Solution 2 Ameera Najah Kv
Solution 3 redochka
Solution 4 Abdur Rahman
Solution 5 J E Carter II
Solution 6 muhammadismailkhan0009

Related Questions