如何使用 Javascript 從父 div 獲取輸入並從中獲取實時值

Question

我遇到了一個我真的不知道如何解決的問題。 例如，我將有一個 div 應用數據屬性

<div class="filter-content" data-filters>
    <div class="filter-attributes">
      <input type="checkbox" name="S1P3">
      <input type="checkbox" name="S1P4">
      <input type="checkbox" name="S1P5">
      <input type="checkbox" name="S1P6">
      <input type="checkbox" name="S1P7">
      <input type="checkbox" name="S1P8">
      <input type="checkbox" name="S1P9">
      <input type="checkbox" name="S1P10">
      <input type="checkbox" name="S1P2">
      <input type="checkbox" name="S1P12">
      <input type="checkbox" name="SP52">
      <input type="checkbox" name="CI">
      <input type="radio" name="CI2">
      <input type="radio" name="CI3">
      <select name="test">
        <option value="test">Test</option>
        <option value="test1">Test1</option>
        <option value="test2">Test2</option>
        <option value="test3">Test3</option>
        <option value="test4">Test4</option>
        <option value="test5">Test5</option>
        <option value="test6">Test6</option>
        <option value="test7">Test7</option>
      </select>
    </div>
  </div>

/**
     * @return {void}
     */
    getFiltersData: function() {
      let filtersInputs = document.querySelector('[data-filters]');
      console.log(filtersInputs)
      
    },

但我不知道如何在每個輸入/ select 上添加一個事件，並在它改變時取值有一個簡單的想法嗎？

Answer 1

我想你需要這樣的東西：

let filtersInputs = document
  .querySelector('[data-filters]')
  .querySelectorAll('input, select');

filtersInputs.forEach((input)=>{
  input.addEventListener('change', (e)=>{
    console.log(e.target.value);
  })
})

請注意，您沒有在 HTML 中分配任何值。