小编Shy*_*had的帖子

如何在 javascript 中创建一个通过复选框过滤 div 的过滤器

我需要通过复选框创建一个过滤器,它将在一个类别中指定两个或多个选项。我的过滤器过滤每个类别中的一个选项。

function change() {
  let results = Array.from(document.querySelectorAll('.result > div'));
  // Hide all results
  results.forEach(function(result) {
    result.style.display = 'none';
  });
  // Filter results to only those that meet ALL requirements:
  Array.from(document.querySelectorAll('.filter input[rel]:checked'), function(input) {
    const attrib = input.getAttribute('rel');
    results = results.filter(function(result) {
      return result.classList.contains(attrib);
    });
  });
  // Show those filtered results:
  results.forEach(function(result) {
    result.style.display = 'block';
  });
}
change();
Run Code Online (Sandbox Code Playgroud)
<div class="filter">
  <h1>Select models</h1>
  <div class="checkbox">
    <label><input type="checkbox" rel="apple" onchange="change()"/>Apple</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="samsung" onchange="change()"/>Samsung</label>
  </div>
  <div class="checkbox">
    <label><input …
Run Code Online (Sandbox Code Playgroud)

html javascript checkbox

4
推荐指数
1
解决办法
2万
查看次数

标签 统计

checkbox ×1

html ×1

javascript ×1