前段代码实现弹出框中添加两个勾选框
时间: 2024-05-09 14:19:49 浏览: 18
以下是一个简单的弹出框代码,其中包含了两个勾选框:
```
<!DOCTYPE html>
<html>
<head>
<title>弹出框</title>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
}
.popup {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
text-align: center;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<div class="overlay">
<div class="popup">
<h2>弹出框</h2>
<label for="checkbox1"><input type="checkbox" id="checkbox1">选项1</label>
<label for="checkbox2"><input type="checkbox" id="checkbox2">选项2</label>
<button class="close">关闭</button>
</div>
</div>
<button id="open-popup">打开弹出框</button>
<script>
var openPopupBtn = document.getElementById("open-popup");
var overlay = document.querySelector(".overlay");
var closePopupBtn = document.querySelector(".close");
openPopupBtn.addEventListener("click", function() {
overlay.style.display = "flex";
});
closePopupBtn.addEventListener("click", function() {
overlay.style.display = "none";
});
</script>
</body>
</html>
```
在弹出框中添加了两个`<label>`元素,分别包含了一个勾选框和一个文本标签。勾选框的`id`属性分别为`checkbox1`和`checkbox2`,文本标签的`for`属性分别与勾选框的`id`属性对应。这样点击文本标签时,就会自动选中或取消勾选框。
注意,勾选框必须放在文本标签内部,否则点击文本标签时不会触发勾选框的事件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)