常见js实现功能单选框、复选框、通过div模拟下拉列表框...

常见的 JS 实现单选框和复选框的方法是通过操作 DOM 元素的 checked 属性来实现，例如：

// 选中单选框
document.getElementById("radioBtn").checked = true;

// 选中复选框
document.getElementById("checkbox").checked = true;

而通过 DIV 模拟下拉列表框，则需要结合 CSS 和 JS 来控制下拉框的显示和隐藏，以及选项的选择。一种常见的实现方法是：

1. 使用一个 DIV 元素作为下拉框的容器，并设置其样式为 `position: relative`。
2. 在 DIV 中添加一个用于显示当前选项的 DIV 元素，以及一个用于显示选项列表的 UL 元素，并设置它们的样式为 `position: absolute`、`top: 100%` 和 `left: 0`。
3. 通过 JS 控制选项列表的显示和隐藏，并监听选项的点击事件来更新当前选项的显示内容。

以下是一个简单的示例代码：

HTML:

<div class="dropdown">
  <div class="selected">请选择</div>
  <ul class="options">
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
  </ul>
</div>

CSS:

.dropdown {
  position: relative;
}

.selected {
  cursor: pointer;
}

.options {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

.options li {
  cursor: pointer;
}

JS:

const dropdown = document.querySelector('.dropdown');
const selected = dropdown.querySelector('.selected');
const options = dropdown.querySelector('.options');

selected.addEventListener('click', () => {
  options.style.display = options.style.display === 'none' ? 'block' : 'none';
});

options.addEventListener('click', event => {
  const target = event.target;
  if (target.tagName === 'LI') {
    selected.textContent = target.textContent;
    options.style.display = 'none';
  }
});