怎么实现多个标签选中和未选中的js
时间: 2024-04-30 07:18:27 浏览: 14
实现多个标签的选中和未选中,可以通过给标签绑定点击事件,然后在事件处理函数中修改标签的样式或属性。
以下是一个简单的实现:
HTML 代码:
```
<div class="tags">
<span class="tag" data-selected="false">标签1</span>
<span class="tag" data-selected="false">标签2</span>
<span class="tag" data-selected="false">标签3</span>
</div>
```
CSS 代码:
```
.tag {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ccc;
margin-right: 10px;
cursor: pointer;
}
.tag.selected {
background-color: #ccc;
color: #fff;
}
```
JavaScript 代码:
```
// 获取所有标签
const tags = document.querySelectorAll('.tag');
// 给每个标签绑定点击事件
tags.forEach(tag => {
tag.addEventListener('click', () => {
// 获取当前标签的选中状态
const isSelected = tag.getAttribute('data-selected') === 'true';
// 切换选中状态
tag.setAttribute('data-selected', isSelected ? 'false' : 'true');
// 修改样式
if (isSelected) {
tag.classList.remove('selected');
} else {
tag.classList.add('selected');
}
});
});
```
这段代码会给所有 class 为 `tag` 的标签绑定点击事件,当用户点击标签时,会切换它的选中状态,并修改标签的样式。具体实现中,我们使用了 `data-selected` 属性来存储标签的选中状态,使用 `classList` 对象来修改标签的 class,从而修改其样式。