Thymeleaf Checkbox not appearing correctly

Question

Thymeleaf Checkbox not appearing correctly

Within my Thymeleaf templates with Bootstrap, I have successfully implemented a checkbox. Below is the code snippet used to incorporate the checkbox into the HTML templates:

     <td>
        <input type="checkbox" name="products" th:value="${p.productId}">
    </td>

Upon running the application, this is the result:

https://i.sstatic.net/s3cEm.png

However, upon clicking on the checkbox, the displayed output changes to:

https://i.sstatic.net/7xmLv.png

Despite restarting my machine and clearing the cache multiple times, the issue persists where the normal check inside the square does not appear as expected.

I am seeking advice on what could potentially be causing this problem?

html css bootstrap-4 thymeleaf

Answer 1

Answer №1

Here is an example of how to use it:

<div>
<input type="checkbox" name="items" th:value="${i.itemId}">[[${i.itemId}]]
</div>

Alternatively,

<div>
<input type="checkbox" name="items" th:value="${i.itemId}">
<label>[[${i.itemId}]]</label>
</div>

Answer 2

Here is an example of how to use it:

<div>
<input type="checkbox" name="items" th:value="${i.itemId}">[[${i.itemId}]]
</div>

Alternatively,

<div>
<input type="checkbox" name="items" th:value="${i.itemId}">
<label>[[${i.itemId}]]</label>
</div>

Thymeleaf Checkbox not appearing correctly

Answer №1

Similar questions

Seamless Gradient Transition Effect on SVG Hover

Unable to choose radio button again

What is the best method to create a transparent first row and all columns using css?

Tips for retrieving and displaying values from a form using only PHP

Leveraging CamanJS for canvas filtering

instructions on implementing Arial Black font style in LESS

Removing a row from a table using a button click in PHP

Calculate the combined total of two inputted values instantly

Adjusting the sound levels of an HTML audio element using JavaScript

Enhance Your YouTube Comment Section with CSS Styling

Can I access properties from the index.html file within the Vue.js mount element?

Finding a solution to this issue in Angular will consistently result in a false outcome

What could be causing my inline-block divs to not line up correctly?

increasing the SQL integer value with padding

Exploring jQuery's selection techniques involving filtering and excluding elements

Angular 14.2.9: "Trouble with Form Data Binding - Seeking Assistance with Proper Data Population"

Using JavaScript to add a class when hovering over an element

Having trouble with Firebase continuously replacing old images with new ones whenever I upload them using JavaScript/jQuery

Determining the widths of elements when floated in Opera 11.*

Placing text to the right of an image inside an <li> tag