JS 实现列表与多选框选择附预览动画

实现列表与多选框选择附预览动画需要通过 HTML、CSS 和 JavaScript 组合完成。

HTML 结构

首先在 HTML 中需要定义一个列表，并将每个 li 元素封装在一个 div 中，每个 div 中包含一个 checkbox 和 label 元素。以下是一个例子：

<div class="list-item">
  <input type="checkbox" id="item1" name="item1" value="item1">
  <label for="item1">Item 1</label>
</div>
<div class="list-item">
  <input type="checkbox" id="item2" name="item2" value="item2">
  <label for="item2">Item 2</label>
</div>
<div class="list-item">
  <input type="checkbox" id="item3" name="item3" value="item3">
  <label for="item3">Item 3</label>
</div>

这是一个简单的包含三个列表项的列表，每个列表项具有一组包含复选框和标签的 div 容器。

CSS 样式

接下来需要为列表项的容器添加样式。以下是一个示例 CSS 样式：

.list-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.list-item:hover {
  background-color: #f1f1f1;
}
.list-item label {
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.list-item input[type="checkbox"] {
  display: none;
}
.list-item input[type="checkbox"]:checked + label::before {
  content: '\2713';
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  margin-right: 5px;
}

这些样式旨在将列表项的容器外观定制为我们希望的样子，以及样式化复选框，并添加一个鼠标悬停效果。

JavaScript 交互

现在，需要为列表项添加交互，以便在选择复选框时可以预览选择的项目。以下是示例 JavaScript 代码：

function toggleSelection() {
  const selectedItems = document.querySelectorAll('.list-item input[type="checkbox"]:checked');
  const previewContainer = document.querySelector('.preview');

  previewContainer.innerHTML = '';

  for (let item of selectedItems) {
    const itemLabel = item.parentElement.querySelector('label').textContent;
    const previewItem = document.createElement('div');
    previewItem.classList.add('preview-item');
    previewItem.appendChild(document.createTextNode(itemLabel));
    previewContainer.appendChild(previewItem);
  }
}

const checkboxes = document.querySelectorAll('.list-item input[type="checkbox"]');

for (let checkbox of checkboxes) {
  checkbox.addEventListener('change', toggleSelection);
}

此代码将所选项的标签呈现为一个位于一个包含容器中的列表中，每个被选择的项都会成为一个使 preview-item 类型的包含项。此代码需监听每个列表项的复选框，以捕获每次选中和取消选中事件。

这就是完整的“JS 实现列表与多选框选择附预览动画”的攻略。