html实现下拉复选框
时间: 2023-09-29 08:03:10 浏览: 48
HTML中实现下拉复选框可以使用`<select>`和`<option>`标签,以及JavaScript实现下拉框的展开和收起,示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>下拉复选框</title>
<meta charset="UTF-8">
<style>
/* 隐藏下拉框 */
#dropdown {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
z-index: 1;
}
/* 显示选中的选项 */
#selected {
border: 1px solid #ccc;
padding: 5px;
width: 200px;
}
</style>
</head>
<body>
<div id="selected" onclick="showDropdown()">请选择:</div>
<div id="dropdown">
<label><input type="checkbox" name="option" value="选项1">选项1</label>
<label><input type="checkbox" name="option" value="选项2">选项2</label>
<label><input type="checkbox" name="option" value="选项3">选项3</label>
</div>
<script>
function showDropdown() {
var dropdown = document.getElementById("dropdown");
if (dropdown.style.display === "none") {
dropdown.style.display = "block";
} else {
dropdown.style.display = "none";
}
}
</script>
</body>
</html>
```
运行代码可见下拉复选框的效果。