js+csss实现的一个带复选框的下拉框

实现带复选框的下拉框可以通过JS和CSS的协作来实现。以下是一些实现具体步骤和示例说明：

步骤1：HTML结构

在HTML中，首先需要定义一个select元素，然后使用option元素填充下拉框选项。选项上可以添加checkbox元素，让用户可以选择多个选项。

<select id="myDropdown" multiple>
  <option value="Option 1"><input type="checkbox" name="Option 1"> Option 1</option>
  <option value="Option 2"><input type="checkbox" name="Option 2"> Option 2</option>
  <option value="Option 3"><input type="checkbox" name="Option 3"> Option 3</option>
  <option value="Option 4"><input type="checkbox" name="Option 4"> Option 4</option>
</select>

步骤2：应用CSS样式

为了让下拉框看起来像是一组多选框，需要应用CSS样式来对下拉框进行定制。这里可以使用伪元素（:before和:after）来绘制符号。

#myDropdown {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  padding: 5px;
  position: relative;
  overflow: hidden;
}

#myDropdown:before, #myDropdown:after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: solid black;
  border-width: 0 2px 2px 0;
  padding: 3px;
}

#myDropdown:before {
  transform: translateY(-50%) rotate(-45deg);
}

#myDropdown:after {
  transform: translateY(-50%) rotate(45deg);
}

#myDropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#myDropdown li {
  padding: 5px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  position: relative;
}

#myDropdown li:hover {
  background-color: #eee;
}

#myDropdown input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

#myDropdown input[type="checkbox"] + label:before {
  content: '';
  display: inline-block;
  border: 1px solid #bbb;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  text-align: center;
  line-height: 14px;
  vertical-align: middle;
  transition: all 0.2s ease;
}

#myDropdown input[type="checkbox"]:checked + label:before {
  content: '✔';
  background-color: #82b965;
  border-color: #82b965;
  color: #fff;
}

步骤3：应用JS脚本

如下JS脚本可以实现下拉框展开、收起和复选框选项的选择和取消：

const dropdown = document.getElementById("myDropdown");
const dropdownContent = document.createElement("ul");
const options = Array.from(dropdown.options);
const toggleDropdown = () => {
  dropdown.classList.toggle("open");
};

options.forEach((option) => {
  const listItem = document.createElement("li");
  const checkbox = option.querySelector("input[type=checkbox]");
  const label = document.createElement("label");
  label.appendChild(checkbox.cloneNode());
  label.append(option.text);
  listItem.appendChild(label);
  dropdownContent.appendChild(listItem);

  checkbox.addEventListener("change", () => {
    option.selected = checkbox.checked;
  });

  option.addEventListener("change", () => {
    checkbox.checked = option.selected;
  });
});

dropdown.appendChild(dropdownContent);
dropdown.addEventListener("click", toggleDropdown);

可以通过切换“open”类来控制下拉框的动画效果。同时需要在选项更改时同步复选框状态和选项状态。

示例1：

可以通过以下步骤来创建一个带复选框的下拉框：

1. 将上面的 HTML、CSS和JS代码粘贴到编辑器中。
2. 打开预览，查看下拉框的外观和交互。
3. 尝试选择多个选项，然后在控制台中查看选项的状态。

示例2：

下面是一个 JSFiddle 示例，其中包含与上述示例相同的代码：

https://jsfiddle.net/huangzhicheng/5c9f1h4m/1/

阅读剩余 66%