从文本显示中删除未选中的项目并将选定的复选框推入按钮元素

Question

我已经设法让文本在选中时显示。每当它未经检查时，文本似乎仍然存在，无论如何要删除它？另外，有没有办法将选中的复选框推送到按钮元素中。

const check = document.querySelectorAll('.accordion-content li');
const checkBox = Array.from(check);
const filtersDisplay = document.querySelector('.search-menu .filter-box');

checkBox.forEach(function(list) {
  list.addEventListener('change', function() {
    console.log(list.textContent);
    filtersDisplay.textContent = list.textContent;
  })
})

<div class="search-menu">
    <h2>Search Menu</h2>
      <input class="search-bar"type="search" placeholder="Search..">
        <button class="search-bar-button">Go</button>

        <br>

    <button class="filter-box">Selected filters will display here</button>
        

  </div>

  <!-- Catagories List -->

<br>

    <button class="accordion">Catagories</button>
    <div class="accordion-content">
          <li>
            <label>
                    <input type="checkbox" name="checkbox" />Item 1
            </label>
          </li>    
            
          <li>
            <label>
                <input type="checkbox" name="checkbox" />Item 2
                </label>
         </li>

          <li>
            <label>
                <input type="checkbox" name="checkbox" />Item 3
            </label>
         </li>
    </div>

Answer 1

您可以显示所选值并使用 Set

将其删除

const check = document.querySelectorAll('.accordion-content li');
const checkBox = Array.from(check);
const filtersDisplay = document.querySelector('.search-menu .filter-box');

const defaultText = "Selected filters will display here";
const selected = new Set();

function showValues(set) {
  if (set.size === 0) filtersDisplay.textContent = defaultText;
  else {
    filtersDisplay.innerHTML = "";
    const fragment = document.createDocumentFragment();
    for (let el of set) {
      const btn = document.createElement("button");
      btn.textContent = (el);
      fragment.appendChild(btn);
    }
    filtersDisplay.appendChild(fragment);
  }
}

checkBox.forEach(function(list) {
  list.addEventListener('change', function(el) {
    const text = list.textContent.trim();
    if (selected.has(text)) {
      selected.delete(text)
    } else selected.add(text)
    showValues(selected);
  })
})

.filter-box {
  background-color: #f5f5f5;
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
  padding: .5rem 1rem;
  border-radius: 4px;
}

.filter-box button{
  background-color: black;
  color: white;
  border-radius: 24px;
  border: none;
}

<div class="search-menu">
  <h2>Search Menu</h2>
  <input class="search-bar" type="search" placeholder="Search..">
  <button class="search-bar-button">Go</button>
  <br />
  <div class="filter-box">Selected filters will display here</div>
</div>

<!-- Categories List -->

<br />

<button class="accordion">Categories</button>
<div class="accordion-content">
  <li>
    <label>
      <input type="checkbox" name="checkbox" />Item 1
    </label>
  </li>
  <li>
    <label>
        <input type="checkbox" name="checkbox" />Item 2
      </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="checkbox" />Item 3
    </label>
  </li>
</div>

Answer 2

将 event 参数传递给 change 事件的侦听器函数。 target.checked 属性将 return true/false 基于复选框状态。

checkBox.forEach(function(list) {
  list.addEventListener('change', function(e) {
    filtersDisplay.textContent = e.target.checked ? list.textContent : 'Selected filters will display here';
  })
})
``

Answer 3

创建一个数组并维护选中复选框的列表。在选中或取消选中时从数组中删除元素。然后遍历数组并显示按钮

const check = document.querySelectorAll('.accordion-content li');
const checkBox = Array.from(check);
const filtersDisplay = document.querySelector('.search-menu .filter-box');
let checkedBox = [];

const txt = 'Selected filters will display here'

checkBox.forEach(function(list) {
  list.addEventListener('change', function(e) {
    if (!checkedBox.includes(list.textContent.trim())) {
      checkedBox.push(list.textContent.trim());

    } else {
      checkedBox = checkedBox.filter(item => item !== list.textContent.trim())
    }
    createButton()
  })
})

function createButton() {
  document.getElementById('filter-box').innerHTML = '';
  if (checkedBox.length !== 0) {

    document.getElementById('filter-box').innerHTML = checkedBox.map(item => `<button>${item}</button>`).join('')


  } else {
    document.getElementById('filter-box').innerHTML = txt

  }
}

<div class="search-menu">
  <h2>Search Menu</h2>
  <input class="search-bar" type="search" placeholder="Search..">
  <button class="search-bar-button">Go</button>

  <br>

  <div class="filter-box" id="filter-box">Selected filters will display here
  </div>




</div>

<!-- Catagories List -->

<br>

<button class="accordion">Catagories</button>
<div class="accordion-content">
  <li>
    <label><input type="checkbox" name="checkbox" />Item 1</label>
  </li>

  <li>
    <label>
                <input type="checkbox" name="checkbox" />Item 2
                </label>
  </li>

  <li>
    <label>
                <input type="checkbox" name="checkbox" />Item 3
            </label>
  </li>
</div>

从文本显示中删除未选中的项目并将选定的复选框推入按钮元素

Remove unchecked item from text display & push selected checkboxes into a button element

html

javascript

checkbox