Как сделать прилипающую кнопку при клике на чекбокс?

Question

[prokopn]

Подскажите, как при клике на чекбокс, возле кликнутого чекбокса добавлять кнопку "Показать", и если кликнули на это же чекбокс то убирать ее. Добавляется кнопка всегда последнему кликнутому чекбоксу. Сейчас у меня проблема в том, что кнопка то попадает возле чекбокса, то нет, то-есть высота неправильно высчитывается. Реализация как тут примерно нужна https://www.dns-shop.ru/catalog/personal/?category.... Спасибо!

const checkboxInput = document.querySelectorAll(".checkbox__input")
const filterFloatingButton = document.querySelector('.floating-btn');
checkboxInput.forEach((input) => {

  input.addEventListener("change", function () {
    if (input.checked) {
      let top = input.getBoundingClientRect().top - "25"
      filterFloatingButton.style.top = top + "px"
      filterFloatingButton.style.display = "block"
    } else {
      filterFloatingButton.style.top = 0
      filterFloatingButton.style.display = "none"
    }
  })
})

<div class="checkboxes">
  <input type="checkbox" class="checkbox__input" />
  <input type="checkbox" class="checkbox__input" />
  <input type="checkbox" class="checkbox__input" />
  <input type="checkbox" class="checkbox__input" />
  <input type="checkbox" class="checkbox__input" />
  <input type="checkbox" class="checkbox__input" />
  <div class="floating-btn">Показать</div>
</div>

.checkboxes {
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:start;
}
.checkbox__input{
  margin: 10px 0px;
}
.floating-btn {
  position: absolute;
  top:0;
  left: 0;
  display:none;
}

Comments

[Михаил Ливач]

а почему не так?

<div class="header"></div>
<div class="page">
  <div class="checkboxes">
    <input type="checkbox" class="checkbox__input" />
    <input type="checkbox" class="checkbox__input" />
    <input type="checkbox" class="checkbox__input" />
    <input type="checkbox" class="checkbox__input" />
    <input type="checkbox" class="checkbox__input" />
    <input type="checkbox" class="checkbox__input" />
  </div>
  <div class="floating-btn">Показать</div>
</div>

.header{
  position:fixed;
  height:50px;
}
.page{
  padding: 50px 0 0;
}
.checkboxes {
  display:flex;
  flex-direction:column;
  align-items:start;
}
.checkbox__input{
  margin: 10px 0;
}
.floating-btn {
  position: absolute;
  top:0;
  left: 50px;
  display:none;
  background-color: lightblue;
}

const checkboxInput = document.querySelectorAll(".checkbox__input")
const filterFloatingButton = document.querySelector('.floating-btn');
checkboxInput.forEach((input) => {

  input.addEventListener("change", function () {
    if (input.checked) {
      const top = input.getBoundingClientRect().top
      filterFloatingButton.style.top = top + "px"
      filterFloatingButton.style.display = "block"
    } else {
      filterFloatingButton.style.top = 0
      filterFloatingButton.style.display = "none"
    }
  })
})

Answer 1

[Сергей delphinpro]

Можно не вычислять положение, а чуть изменить принцип и верстку. Позиционировать кнопку с помощью CSS в отдельном контейнере, скриптом перемещать в нужный контейненр.

<div class="filter-item">
  <input type="checkbox">
</div>
<div class="filter-item">
  <input type="checkbox">
</div>
<div class="filter-item">
  <input type="checkbox">
</div>
<button id="apply-button">показать</button>

#apply-button {
  display: none;
}

.filter-item {
  position: relative;
}
.filter-item input:checked ~ #apply-button {
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

const button = document.getElementById('apply-button');
document.querySelectorAll('.filter-item').forEach(item => {
  const cb = item.querySelector('input[type=checked]');
  cb.addEventListener('change', () => {
    if (cb.checked) {
      item.appendChild(button);
    }
  })
});