基于Checkbox实现Div筛选功能的脚本编写求助

我来帮你搞定这个Checkbox筛选的问题！先看看你原脚本里的几个关键问题，再给你一个不用大量if语句、扩展性强的实现方案～

原脚本的问题分析 #

1. 拼写错误：你写的chechbox是笔误，正确的类名是checkbox，这直接导致你获取不到任何Checkbox元素
2. DOM元素获取误区：getElementsByClassName返回的是HTMLCollection类数组对象，不是单个元素，你不能直接用.value去访问它的属性，需要遍历每个Checkbox
3. 目标元素错误：你获取的是整个.result容器，但实际需要筛选的是它里面的各个国家Div
4. 缺少事件监听：你的代码只在页面加载时执行一次，没有监听Checkbox的状态变化，所以选Checkbox的时候不会触发筛选

优化后的实现代码 #

这个方案不需要写一堆if判断，新增国家选项时也不用修改JS代码，非常灵活：

<!-- 你的HTML结构保持不变 -->
<div class="filter">
 <div class="checkbox">
 <label><input type="checkbox" rel="canada"/>Canada</label>
 </div>
 <div class="checkbox">
 <label><input type="checkbox" rel="china"/>China</label>
 </div>
 <div class="checkbox">
 <label><input type="checkbox" rel="usa"/>USA</label>
 </div>
 <div class="checkbox">
 <label><input type="checkbox" rel="india"/>India</label>
 </div>
</div>

<div class="result">
 <div class="canada">
 <h1>Canada</h1>
 <h2>Jason</h2>
 </div>
 <div class="china">
 <h1>China</h1>
 <h2>Ni</h2>
 </div>
 <div class="usa">
 <h1>USA</h1>
 <h2>Micheal</h2>
 </div>
 <div class="india">
 <h1>India</h1>
 <h2>Alan</h2>
 </div>
</div>

<script>
// 获取所有筛选用的Checkbox，以及需要被筛选的国家Div
const checkboxes = document.querySelectorAll('.filter input[type="checkbox"]');
const countryDivs = document.querySelectorAll('.result > div');

// 核心筛选函数
function filterCountries() {
  // 收集所有被选中的Checkbox的rel属性值
  const selectedCountries = Array.from(checkboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.getAttribute('rel'));

  // 如果没有选中任何Checkbox，显示所有国家Div
  if (selectedCountries.length === 0) {
    countryDivs.forEach(div => div.style.display = 'block');
    return;
  }

  // 遍历每个国家Div，判断是否在选中列表中，控制显示/隐藏
  countryDivs.forEach(div => {
    // 这里利用Div的类名和Checkbox的rel值一致的特性
    const countryName = div.classList[0];
    div.style.display = selectedCountries.includes(countryName) ? 'block' : 'none';
  });
}

// 给每个Checkbox绑定状态变化事件，触发筛选
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', filterCountries);
});

// 页面加载时执行一次筛选，确保初始状态正确
filterCountries();
</script>

方案优势 #

• 无冗余if判断：用数组的includes方法替代一堆条件判断，逻辑更清晰
• 扩展性强：如果后续要新增国家选项，只需要添加对应的Checkbox和Div，JS代码完全不用修改
• 实时响应：监听Checkbox的change事件，用户勾选/取消时立刻触发筛选
• 初始状态正确：页面加载时自动执行一次筛选，避免初始状态异常

内容的提问来源于stack exchange，提问作者Shyngys Rakhad