选中输入复选框时，Javascript 启用 html

Question

条件应该是什么:如果我单击复选框，则触发该特定品牌的商品？

这里我想打印所选项目的值

当前代码显示Cannot read properties of null (reading 'addEventListener')

let filterBrand = document.getElementById("filter-brands");
filterBrand.addEventListener("change", function() {
  if (filterBrand.value == "Amana") {
    document.querySelector(".item-list").innerHTML = "";
    for (let i = 0; i < productData.length; i++) {
      console.log("hello");
    }
  }
});

<h5>Filter By Brand</h5>
<ul id="filter-brands">
  <li>
    <input type="checkbox" id="Amana" value="Amana" />
    <label for="Amana">Amana</label>
  </li>
  <li>
    <input type="checkbox" id="Frigidaire" value="Frigidaire" />
    <label for="Frigidaire">Frigidaire</label>
  </li>
  <li>
    <input type="checkbox" id="GE" value="GE" />
    <label for="GE">GE</label>
  </li>
  <li>
    <input type="checkbox" id="Insignia" value="Insignia" />
    <label for="Insignia">Insignia</label>
  </li>
  <li>
    <input type="checkbox" id="LG" value="LG" />
    <label for="LG">LG</label>
  </li>
  <li>
    <input type="checkbox" id="Samsung" value="Samsung" />
    <label for="Samsung">Samsung</label>
  </li>
  <li>
    <input type="checkbox" id="Whirlpool" value="Whirlpool" />
    <label for="Whirlpool">Whirlpool</label>
  </li>
</ul>

Answer 1

您可以使用 css-selector #filter-brands input[type='checkbox']:checked 检索 ul#filter-brands 中所有选中的复选框。例如:

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.closest(`#filter-brands`)) {
    console.clear();
    const selected = [];
    // all checked checkboxes
    document.querySelectorAll(`#filter-brands input[type='checkbox']:checked`)
      .forEach( cb => /* here you can insert code to display stuff */
        selected.push(cb.id) );
    console.log(`Selected: ${selected.length ? selected.join(`, `) : `NONE`}`);
  }
}

<h5>Filter By Brand</h5>
<ul id="filter-brands">
  <li>
    <input type="checkbox" id="Amana" value="Amana" />
    <label for="Amana">Amana</label>
  </li>
  <li>
    <input type="checkbox" id="Frigidaire" value="Frigidaire" />
    <label for="Frigidaire">Frigidaire</label>
  </li>
  <li>
    <input type="checkbox" id="GE" value="GE" />
    <label for="GE">GE</label>
  </li>
  <li>
    <input type="checkbox" id="Insignia" value="Insignia" />
    <label for="Insignia">Insignia</label>
  </li>
  <li>
    <input type="checkbox" id="LG" value="LG" />
    <label for="LG">LG</label>
  </li>
  <li>
    <input type="checkbox" id="Samsung" value="Samsung" />
    <label for="Samsung">Samsung</label>
  </li>
  <li>
    <input type="checkbox" id="Whirlpool" value="Whirlpool" />
    <label for="Whirlpool">Whirlpool</label>
  </li>
</ul>

更具体的方法(每个复选框的处理程序):

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.closest(`#filter-brands`) && evt.target.type === `checkbox`) {
    const selected = evt.target.checked;
    return document.querySelector(`[data-selector='${evt.target.id}']`)
      .classList[evt.target.checked ? `add` : `remove`](`selected`);
  }
}

ul {
  display: inline-block;
  max-width: 50vw;
}

ul#filter-brands {
  float: left;
}

#brand-lists li {
  display: none;
}

#brand-lists li.selected {
  display: revert;
}

<h5>Filter By Brand</h5>
<ul id="filter-brands">
  <li>
    <input type="checkbox" id="Amana" value="Amana" />
    <label for="Amana">Amana</label>
  </li>
  <li>
    <input type="checkbox" id="Frigidaire" value="Frigidaire" />
    <label for="Frigidaire">Frigidaire</label>
  </li>
  <li>
    <input type="checkbox" id="GE" value="GE" />
    <label for="GE">GE</label>
  </li>
  <li>
    <input type="checkbox" id="Insignia" value="Insignia" />
    <label for="Insignia">Insignia</label>
  </li>
  <li>
    <input type="checkbox" id="LG" value="LG" />
    <label for="LG">LG</label>
  </li>
  <li>
    <input type="checkbox" id="Samsung" value="Samsung" />
    <label for="Samsung">Samsung</label>
  </li>
  <li>
    <input type="checkbox" id="Whirlpool" value="Whirlpool" />
    <label for="Whirlpool">Whirlpool</label>
  </li>
</ul>

<ul id="brand-lists">
  <li data-selector="Amana">Amana list</li>
  <li data-selector="Frigidaire">Frigidaire list</li>
  <li data-selector="GE">GE list</li>
  <li data-selector="Insignia">Insignia list
  <li data-selector="LG">LG list</li>
  <li data-selector="Samsung">Samsung list</li>
  <li data-selector="Whirlpool">Whirlpool list</li>
</ul>