当不再选中过滤器复选框时,要再次显示所有的div,可以通过以下几种方法实现:
// HTML代码
<input type="checkbox" id="filterCheckbox" />
<div class="div1">内容1</div>
<div class="div2">内容2</div>
<div class="div3">内容3</div>
// JavaScript代码
const filterCheckbox = document.getElementById("filterCheckbox");
const divElements = document.querySelectorAll("div");
filterCheckbox.addEventListener("change", function() {
if (!filterCheckbox.checked) {
divElements.forEach(function(div) {
div.style.display = "block";
});
}
});
<style>
.show {
display: block !important;
}
</style>
<input type="checkbox" id="filterCheckbox" />
<div class="div1 show">内容1</div>
<div class="div2 show">内容2</div>
<div class="div3 show">内容3</div>
<script>
const filterCheckbox = document.getElementById("filterCheckbox");
const divElements = document.querySelectorAll("div");
filterCheckbox.addEventListener("change", function() {
if (!filterCheckbox.checked) {
divElements.forEach(function(div) {
div.classList.add("show");
});
}
});
</script>
需要注意的是,以上代码中只是给出了实现的思路,并未涉及云计算和IT互联网领域的名词和腾讯云产品的介绍。如需了解更多相关知识和产品介绍,建议访问腾讯云官方网站或咨询相关专业人士。
领取专属 10元无门槛券
手把手带您无忧上云