js淘宝多选代码

在JavaScript中实现淘宝风格的多选功能，通常涉及到一组复选框（checkboxes）和相应的标签（labels），以及可能的样式和交互逻辑。以下是一个基础的实现示例：

HTML结构

<div id="multi-select">
  <label><input type="checkbox" name="item" value="1">选项1</label>
  <label><input type="checkbox" name="item" value="2">选项2</label>
  <label><input type="checkbox" name="item" value="3">选项3</label>
  <!-- 更多选项 -->
</div>
<button id="select-all">全选</button>
<button id="deselect-all">全不选</button>

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
  const checkboxes = document.querySelectorAll('#multi-select input[type="checkbox"]');
  const selectAllBtn = document.getElementById('select-all');
  const deselectAllBtn = document.getElementById('deselect-all');

  // 全选功能
  selectAllBtn.addEventListener('click', function() {
    checkboxes.forEach(function(checkbox) {
      checkbox.checked = true;
    });
  });

  // 全不选功能
  deselectAllBtn.addEventListener('click', function() {
    checkboxes.forEach(function(checkbox) {
      checkbox.checked = false;
    });
  });

  // 可以添加更多交互逻辑，例如：
  // 1. 监听每个复选框的变化，实时更新UI或执行其他操作。
  // 2. 使用CSS美化复选框和标签的样式，使其看起来更像淘宝的风格。
});

CSS样式（可选）

为了使复选框看起来更美观，可以使用CSS进行样式定制：

#multi-select label {
  display: block;
  margin-bottom: 10px;
  cursor: pointer;
}

#multi-select input[type="checkbox"] {
  display: none; /* 隐藏原生的复选框 */
}

#multi-select label:before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid #ccc;
  background: #fff;
}

#multi-select input[type="checkbox"]:checked + label:before {
  content: '✓';
  text-align: center;
  line-height: 20px;
}