使用RadioButton筛选内容：现有代码逻辑反向，需实现仅显示选中项内容

数据老陈

2026-7-26

解决单选按钮筛选内容（仅显示匹配项）的问题

你的代码存在几个关键问题，直接导致逻辑不符合需求：

元素选择器错误：你用了#manga, #manwga（还拼写错误，应为manwha），但你明确说明内容元素是类标签，应该使用类选择器.manga, .manwha来获取所有内容项。
匹配逻辑错误：你通过data-type属性判断匹配，但内容是用类标签标识的，应该检查元素是否包含选中的类名。
未处理"全部"选项的默认情况（如果需要的话）。

修正后的代码：

function filterItems() {
  // 获取选中的单选按钮值
  var selectedValue = document.querySelector('input[name="checkbox3"]:checked').value;

  // 获取所有带manga或manwha类的内容元素
  var items = document.querySelectorAll('.manga, .manwha');

  // 循环处理每个内容项
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    // 如果选中"all"，或者元素包含匹配的类，则显示，否则隐藏
    if (selectedValue === 'all' || item.classList.contains(selectedValue)) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  }
}

关键修改说明：

把选择器从#manga, #manwga改成.manga, .manwha，正确选中所有带目标类的内容元素，同时修正了manwga的拼写错误。
把判断条件从item.getAttribute('data-type') === selectedValue改成item.classList.contains(selectedValue)，直接检查元素的类列表是否包含选中的值，符合你描述的"内容元素带有值为manga、manwha的类标签"的设定。
保留了"all"选项的处理逻辑，确保选中"全部"时所有内容都显示。

额外提示：

确保你的单选按钮组里包含value="all"的选项（如果需要全部显示的功能），比如：

<input type="radio" name="checkbox3" value="all" checked> 全部
<input type="radio" name="checkbox3" value="manga"> 漫画
<input type="radio" name="checkbox3" value="manwha"> 韩漫