Thymeleaf 每个循环都带有复选框标签，不检查值

Question

我在互联网上找不到解决方案，所以也许更多的眼睛可以提供帮助。

我有慈善捐款表格。它使用 thymeleaf 模板引擎。 我使用模型将所需的对象传递给视图，如下所示：

` @GetMapping("/捐赠") 公共字符串showDonationForm（模型模型）{

    List<CategoryDTO> categoryDTOs = categoryService.findAll();
    List<InstitutionDTO> institutionDTOs = institutionService.findAll();

    log.info("{}", categoryDTOs);

    model.addAttribute("donation", new DonationDTO());;
    model.addAttribute("categories", categoryDTOs);
    model.addAttribute("institutions", institutionDTOs);

    return "form";
}`

我已将 DTO 对象传递到视图。 CategoryDTO 和InstitutionDTO 都有@Data 注释，因此存在getter 和setter。请参阅类别 DTO：

`@数据 公开课 CategoryDTO {

private Long id;

private String name;

private List<DonationDTO> donationDTOs = new ArrayList<>();

}`

当模板引擎呈现视图时，我的类别会正确呈现：就像给定的片段一样：

`

Document








  <div class="slogan container container--90">
    <div class="slogan--item">
      <h1>
        Oddaj rzeczy, których już nie chcesz<br />
        <span class="uppercase">potrzebującym</span>
      </h1>

      <div class="slogan--steps">
        <div class="slogan--steps-title">Wystarczą 4 proste kroki:</div>
        <ul class="slogan--steps-boxes">
          <li>
            <div><em>1</em><span>Wybierz rzeczy</span></div>
          </li>
          <li>
            <div><em>2</em><span>Spakuj je w worki</span></div>
          </li>
          <li>
            <div><em>3</em><span>Wybierz fundację</span></div>
          </li>
          <li>
            <div><em>4</em><span>Zamów kuriera</span></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

<section class="form--steps">
  <div class="form--steps-instructions">
    <div class="form--steps-container">
      <h3>Ważne!</h3>
      <p data-step="1" class="active">
        Uzupełnij szczegóły dotyczące Twoich rzeczy. Dzięki temu będziemy
        wiedzieć komu najlepiej je przekazać.
      </p>
      <p data-step="2">
        Uzupełnij szczegóły dotyczące Twoich rzeczy. Dzięki temu będziemy
        wiedzieć komu najlepiej je przekazać.
      </p>
      <p data-step="3">
       Wybierz jedną, do
        której trafi Twoja przesyłka.
      </p>
      <p data-step="4">Podaj adres oraz termin odbioru rzeczy.</p>
    </div>
  </div>

  <div class="form--steps-container">
    <div class="form--steps-counter">Krok <span>1</span>/4</div>

    <form th:action="@{/donations/donate}" th:method="post" th:object="${donation}">
      <!-- STEP 1: class .active is switching steps -->
      <div data-step="1" class="active">
        <h3>Zaznacz co chcesz oddać:</h3>

        <div class="form-group form-group--checkbox" th:each="category : ${categories}">
          <label>
            <input type="checkbox" name="categories" th:field="*{categoryDTOs}" th:value="${category.id}" />
            <span class="checkbox"></span>
            <span class="description" th:text="${category.name}"></span>
          </label>
        </div>

        <div class="form-group form-group--checkbox">
          <label>
            <input
                    type="checkbox"
                    name="categories"
                    value="clothes-to-use"
            />
            <span class="checkbox"></span>
            <span class="description"
            >ubrania, które nadają się do ponownego użycia</span
            >
          </label>
        </div>

        <div class="form-group form-group--checkbox">
          <label>
            <input
                    type="checkbox"
                    name="categories"
                    value="clothes-useless"
            />
            <span class="checkbox"></span>
            <span class="description">ubrania, do wyrzucenia</span>
          </label>
        </div>

        <div class="form-group form-group--checkbox">
          <label>
            <input type="checkbox" name="categories" value="toys" />
            <span class="checkbox"></span>
            <span class="description">zabawki</span>
          </label>
        </div>

        <div class="form-group form-group--checkbox">
          <label>
            <input type="checkbox" name="categories" value="books" />
            <span class="checkbox"></span>
            <span class="description">książki</span>
          </label>
        </div>

        <div class="form-group form-group--checkbox">
          <label>
            <input type="checkbox" name="categories" value="other" />
            <span class="checkbox"></span>
            <span class="description">inne</span>
          </label>
        </div>

        <div class="form-group form-group--buttons">
          <button type="button" class="btn next-step">Dalej</button>
        </div>
      </div>

      <!-- STEP 2 -->
      <div data-step="2">
        <h3>Podaj liczbę 60l worków, w które spakowałeś/aś rzeczy:</h3>

        <div class="form-group form-group--inline">
          <label>
            Liczba 60l worków:
            <input type="number" name="bags" step="1" min="1" th:field="${donation.quantity}"/>
          </label>
        </div>

        <div class="form-group form-group--buttons">
          <button type="button" class="btn prev-step">Wstecz</button>
          <button type="button" class="btn next-step">Dalej</button>
        </div>
      </div>

      <!-- STEP 4 -->
      <div data-step="3">
        <h3>Wybierz organizacje, której chcesz pomóc:</h3>

        <div class="form-group form-group--checkbox" th:each="institution : ${institutions}">
          <label>
            <input type="radio" name="organization" th:value="${institution.id}" th:field="*{institutionDTO}"/>
            <span class="checkbox radio"></span>
            <span class="description">
    <div class="title" th:text="${institution.name}"></div>
    <div class="subtitle" th:text="${institution.description}"></div>
  </span>
          </label>
        </div>

        <div class="form-group form-group--buttons">
          <button type="button" class="btn prev-step">Wstecz</button>
          <button type="button" class="btn next-step">Dalej</button>
        </div>
      </div>


      <!-- STEP 5 -->
      <div data-step="4">
        <h3>Podaj adres oraz termin odbioru rzecz przez kuriera:</h3>

        <div class="form-section form-section--columns">
          <div class="form-section--column">
            <h4>Adres odbioru</h4>
            <div class="form-group form-group--inline">
              <label> Ulica <input type="text" name="address" th:field="${donation.street}"/> </label>
            </div>

            <div class="form-group form-group--inline">
              <label> Miasto <input type="text" name="city" th:field="${donation.city}"/> </label>
            </div>

            <div class="form-group form-group--inline">
              <label>
                Kod pocztowy <input type="text" name="postcode" th:field="${donation.zipCode}"/>
              </label>
            </div>

            <div class="form-group form-group--inline">
              <label>
                Numer telefonu <input type="phone" name="phone" th:field="${donation.phoneNumber}"/>
              </label>
            </div>
          </div>

          <div class="form-section--column">
            <h4>Termin odbioru</h4>
            <div class="form-group form-group--inline">
              <label> Data <input type="date" name="data" th:field="${donation.pickUpDate}"/> </label>
            </div>

            <div class="form-group form-group--inline">
              <label> Godzina <input type="time" name="time" th:field="${donation.pickUpTime}"/> </label>
            </div>

            <div class="form-group form-group--inline">
              <label>
                Uwagi dla kuriera
                <textarea name="more_info" rows="5" th:field="${donation.pickUpComment}"></textarea>
              </label>
            </div>
          </div>
        </div>
        <div class="form-group form-group--buttons">
          <button type="button" class="btn prev-step">Wstecz</button>
          <button type="button" class="btn next-step">Dalej</button>
        </div>
      </div>

      <!-- STEP 6 -->
      <div data-step="5">
        <h3>Podsumowanie Twojej darowizny</h3>

        <div class="summary">
          <div class="form-section">
            <h4>Oddajesz:</h4>
            <ul>
              <li>
                <span class="icon icon-bag"></span>
                <span class="summary--text"
                  >4 worki ubrań w dobrym stanie dla dzieci</span
                >
              </li>

              <li>
                <span class="icon icon-hand"></span>
                <span class="summary--text"
                  >Dla fundacji "Mam marzenie" w Warszawie</span
                >
              </li>
            </ul>
          </div>

          <div class="form-section form-section--columns">
            <div class="form-section--column">
              <h4>Adres odbioru:</h4>
              <ul>
                <li>Prosta 51</li>
                <li>Warszawa</li>
                <li>99-098</li>
                <li>123 456 789</li>
              </ul>
            </div>

            <div class="form-section--column">
              <h4>Termin odbioru:</h4>
              <ul>
                <li>13/12/2018</li>
                <li>15:40</li>
                <li>Brak uwag</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="form-group form-group--buttons">
          <button type="button" class="btn prev-step">Wstecz</button>
          <button type="submit" class="btn">Potwierdzam</button>
        </div>
      </div>
    </form>
  </div>
</section>

<div th:insert="~{commonviewparts/footer :: footer}">
</div>

<script th:src="@{/js/app.js}"></script>

`

在给定的视图中，我在步骤 1 中遇到问题。首先，我对类别进行每次循环迭代。然后下面我有硬编码的类别进行比较。当我单击动态生成的类别时，它不会被检查，但是当我单击硬编码时，它工作正常。当我提交表单并且没有单击任何类别时，当我登录 DonationDTO 时，它会显示所有类别均已检查。我的转换器设置正确，因为我没有收到任何解析异常。 你能帮我告诉我可能出了什么问题吗？

我在互联网上搜索以找到解决方案。我检查了chatgpt中的文件以检查是否有拼写错误。还是没有解决办法。

查看了相关问题。

Answer 1

我没有使用 th:field，而是使用 th:name 和 th:id 标签。 Chekcing 正在工作，并且在表单提交后正确解析了 CategoryDTO。

            <div class="form-group form-group--checkbox" th:each="category : ${categories}">
          <label>
            <input type="checkbox" th:name="categoryDTOs" th:id="'categoryDTOs' + ${category.id}" th:value="${category.id}" />
            <span class="checkbox"></span>
            <span class="description" th:text="${category.name}"></span>
          </label>
        </div>