0

Помогите, пожалуйста, добавить в <label id="lbl"> value отмеченных чекбоксов.

<tr th:each="mess : ${messages}">
    <td name="id" th:text="${mess.id}"></td>
    <td>
        <input type="checkbox" name="checkboxName" id="checkbox_check" th:value="${mess.id}" onclick="check()"/>
    </td>
</tr>
<tr>
  <td>
     <form th:action="@{/removes}" method="post">
      <label id="lbl">
        <input type="submit" value="Удалить" style="display: block; margin-right: auto;" />
      </label>
        </form>
    </td>
</tr>

JS код ниже почему-то дублирует добавление строк с уже ранее выбранными чекбоксами. Например, выбираем ЧБ с value=10, добавляется строка

<input type="hidden" id="remid" value="10"/>

потом ещё выбираем ЧБ с value=20, добавляются уже 2 строки

<input type="hidden" id="remid" value="10"/>

<input type="hidden" id="remid" value="20"/> и т.д. Нужно добавлять по одной строке при выборе чекбокса.

<script th:inline="javascript">
function check() {
  if (document.getElementsByName('checkbox_check')) {
    var checkValues = document.getElementsByName('checkbox_check').value;
    var divStr = '<input type="hidden" id="remid" value="' + checkedValue + '"/>';
    for (var checkValue of checkValues) {
        if (checkValue.checked) {
            document.getElementById("lbl").innerHTML += divStr;
            }
    }
  } 
}
</script>
5
  • не совсем понятен механизм, ты добавляешь checked, первый раз у тебя checked только один, он и добавился, второй раз их уже два, ты их и добавляешь, в чем проблема? чтоб один добавился надо с предыдущего убрать checked
    – Alexandr
    Commented 5 окт. 2021 в 9:31
  • Задумка добавлять в form все отмеченные чекбоксы, что бы потом передать на бэк при нажатии удалить.
    – kent
    Commented 5 окт. 2021 в 9:37
  • я не вижу полного функционала, но теоретически не хватает проверки на уже добавленные checkbox, чтоб не дублировались, или может перетирать ранее записанные данные?
    – Alexandr
    Commented 5 окт. 2021 в 9:45
  • document.getElementById("lbl").innerHTML += divStr; перед этим действием в начале срабатывания функции может просто обнулить этот блок?
    – Alexandr
    Commented 5 окт. 2021 в 9:46
  • Была такая идея, по проверке на checked, но поскольку в JS не силен, то решил обратиться. Ладно, попробую своять проверку.
    – kent
    Commented 5 окт. 2021 в 9:48

1 ответ 1

0

Вставьте обнуление перед передачей обновленного массива

document.getElementById("lbl").innerHTML = '';

<script th:inline="javascript">
  function check() {
    if (document.getElementsByName('checkbox_check')) {
      var checkValues = document.getElementsByName('checkbox_check').value;
      var divStr = '<input type="hidden" id="remid" value="' + checkedValue +       '"/>';
      document.getElementById("lbl").innerHTML = '';
      for (var checkValue of checkValues) {
          if (checkValue.checked) {
              document.getElementById("lbl").innerHTML += divStr;
              }
      }
  } 
}
</script>

1
  • Спасибо, подошло. Пришлось, правда, из <label id="lbl"> всё остальное убирать, т.к. всё очищается.
    – kent
    Commented 5 окт. 2021 в 11:55

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.