問題

私はちょうどjqueryとjavascriptを使用してチェックボックス配列でフィルタを作成したい。 1つのチェックボックスしか選択されていないときにうまく動作しますが、2つ以上のチェックボックスを選択すると、すべてのdivが表示されません。私の間違いを見つけるのを手伝ってください。 私はフィルタ配列をフィルタリングしたい。私たちの配列の名前はFlyListです または

 let FlyList = [
  {
    id: "1",
    Airline_number: "961",
    Type_ticket: "systemi",
    Airline: "dubai",
    fly_time: "04:00-08:00",
    Class_type: "Economical"
  },
  {
    id: "2",
    Airline_number: "962",
    Type_ticket: "charteri",
    Airline: "frans",
    fly_time: "08:00-11:00",
    Class_type: "Commercial"
  },
  {
    id: "3",
    Airline_number: "963",
    Type_ticket: "systemi",
    Airline: "Emirates",
    fly_time: "11:00-14:00",
    Class_type: "Commercial"
  },
  {
    id: "4",
    Airline_number: "964",
    Type_ticket: "systemi",
    Airline: "Emirates",
    fly_time: "14:00-17:00",
    Class_type: "Economical"
  },
  {
    id: "5",
    Airline_number: "965",
    Type_ticket: "charteri",
    Airline: "dubai",
    fly_time: "17:00-21:00",
    Class_type: "Commercial"
  },
  {
    id: "6",
    Airline_number: "966",
    Type_ticket: "charteri",
    Airline: "frans",
    fly_time: "21:00-24:00",
    Class_type: "Economical"
  }
];

function customFilter(list, field, value) {
  let fill = list.filter(item => {
    if (typeof filter === "object") {
      value.forEach(val => {
        return item[field] === value;
      });
    }
  });
  console.log(fill);
}

let filterCheckbox = document.querySelector(".customCheck");
filterCheckbox.addEventListener("change", e => {
  e.preventDefault();
  // jquery
  // var field = $(this).parents('.filter_type').attr('data-field');
  let field = document.querySelector(".filter_type").getAttribute("data-field");
  // jquery

  let val = e.target.value;

  customFilter(FlyList, field, val);
  // console.log(val);
});

<!-- begin snippet: js hide: false console: true babel: false --> 

 <div class="filters">
  <div class="collapse show" id="collapseFilters">
    <div class="filter_type" data-field="Type_ticket">
      <h6>
        Type of ticket
        <div class="switcher float-left ">
          <label class="customToggle small">
            <input type="checkbox" name="" id="" class="selectall" />
            all Type of ticket
            <div class="indicator"></div>
          </label>
        </div>
      </h6>
      <ul>
        <li>
          <label class="customCheck w-100 " id="filter-check">
            <input type="checkbox" name="" value="systemi" class="individual" />
            systemi
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck w-100" id="filter-check2">
            <input
              type="checkbox"
              name=""
              value="charteri"
              class="individual"
            />
            charteri
            <div class="indicator"></div>
          </label>
        </li>
      </ul>
    </div>
    <div class="filter_type airlineSelection" data-field="Airline">
      <h6>
        airline
        <div class="switcher float-left">
          <label class="customToggle small">
            <input type="checkbox" name="" id="" />
            all airline
            <div class="indicator"></div>
          </label>
        </div>
      </h6>
      <ul>
        <li>
          <label class="customCheck" id="">
            <input type="checkbox" value="frans" name="inlineRadioOptions" />
            frans
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" name="inlineRadioOptions" /> dubai
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="emirates" name="inlineRadioOptions" />
            emirates
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="frans" name="inlineRadioOptions" />
            frans
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="emirates" name="inlineRadioOptions" />
            emirates
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="dubai" name="inlineRadioOptions" />
            dubai
            <div class="indicator"></div>
          </label>
        </li>
      </ul>
    </div>

    <div class="filter_type" data-field="Class_type">
      <h6>
        Class_type
        <div class="switcher float-left">
          <label class="customToggle small">
            <input type="checkbox" name="" id="" />
            all Class_type
            <div class="indicator"></div>
          </label>
        </div>
      </h6>
      <ul>
        <li>
          <label class="customCheck" id="">
            <input
              type="checkbox"
              value="economical"
              name="inlineRadioOptions"
            />
            economical
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="commercial"
              name="inlineRadioOptions"
            />
            commercial
            <div class="indicator"></div>
          </label>
        </li>
      </ul>
    </div>
    <div class="filter_type" data-field="fly_time">
      <h6>
        fly_time
        <div class="switcher float-left">
          <label class="customToggle small">
            <input type="checkbox" name="" id="" />
            all fly_time
            <div class="indicator"></div>
          </label>
        </div>
      </h6>
      <ul>
        <li>
          <label class="customCheck" id="">
            <input
              type="checkbox"
              value="04:00-08:00"
              name="inlineRadioOptions"
            />
            04:00-08:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="08:00-11:00"
              name="inlineRadioOptions"
            />
            08:00-11:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="11:00-14:00"
              name="inlineRadioOptions"
            />
            11:00-14:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="14:00-17:00"
              name="inlineRadioOptions"
            />
            14:00-17:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="17:00-21:00"
              name="inlineRadioOptions"
            />
            17:00-21:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="21:00-24:00"
              name="inlineRadioOptions"
            />
            21:00-24:00
            <div class="indicator"></div>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div> 

  ベストアンサー

querySelector では、1つの要素だけを選択します。そのため、最初の.customCheckチェックボックスにイベントリスナーを追加します。

すべてのチェックボックスにイベントリスナーを付ける必要があります。これを行うには、querySelectorの代わりに querySelectorAll を使用し、各入力にイベントを添付できます。

 let filterCheckboxes = document.querySelectorAll('.customCheck');

filterCheckboxes.forEach(checkbox => checkbox.addEventListener('change' , (e) => { 
  console.log(e);
  // filtering goes here
}))
 

  同じタグがついた質問を見る

javascriptjqueryfilter