Блог

Итак, люди, у меня есть 3 флажка:

                     <label>
                        <input type="checkbox" value="Java" id="check-java" class="check-java filled-in" 
                         />
                        <span>Java</span>
                    </label>
                    amp;nbsp;
                    <label>
                        <input type="checkbox" value="JavaScript" id="check-javascript" class="check-javascript filled-in" />
                        <span>JavaScript</span>
                    </label>
                    amp;nbsp;
                    <label>
                        <input type="checkbox" value="Python" id="check-python" class="check-python filled-in"
                             />
                        <span>Python</span>
                    </label>
  

И когда пользователь устанавливает эти флажки, я перехватываю его в EventListener `:

 const checkBoxes = document.querySelectorAll('input[type=checkbox]');
checkBoxes.forEach((box) => {
    return box.addEventListener('change', filterByCheckBox)
});
  

Итак, когда пользователь устанавливает два или более из этих флажков, мне нужно отфильтровать массив (devsFiltered), там содержится подмассив с именем «programmingLanguages», и в этом массиве у меня есть 3 возможных значения «Java, JavaScript или Python», и мне нужно фильтровать, только если массив содержит дваили несколько значений, выбранных флажками, код, который я пытаюсь использовать:

 function filterByCheckBox(e) {
                const checkOption = e.target.value;
                if (devsFiltered.length > 0) {
                    const filtered  = devsFiltered
                    .filter(item => item.programmingLanguages
                        .every(lang => lang.language == checkOption));
                         mapUsers(filtered)
                }
        }
  

Вам нужно получить все выбранные элементы и посмотреть, все ли отмеченные элементы находятся в массиве.

 var people = [
 { name: "w", codes : ['a', 'b'] },
 { name: "x", codes : ['a', 'c'] },
 { name: "y", codes : ['a', 'b'] },
 { name: "z", codes : ['b','c'] }
];

var form = document.querySelector("form");
form.addEventListener("change", function() {
  // get all the checked checkboxes
  const selections = document.querySelectorAll('[type="checkbox"]:checked');
  // get all their values
  const values = selections amp;amp; [...selections].map(({
    value
  }) => value);
  // filter the list to make sure all the values are in the object
  const filtered = values ?
    people.filter(({
        codes
      }) =>
      values.every(code => codes.includes(code))) : people;
      
  // Just to display something
  console.log(filtered.map(f => f.name).join(","));
});  

 <form id="form">
  <label for="a">A</label><input type="checkbox" id="a" value="a" />
  <label for="b">B</label><input type="checkbox" id="b" value="b" />
  <label for="c">C</label><input type="checkbox" id="c" value="c" />
</form>  

в формате, который немного более удобочитаем

Вам нужно получить все выбранные элементы и посмотреть, все ли отмеченные элементы находятся в массиве.

 var people = [
 { name: "w", codes : ['a', 'b'] },
 { name: "x", codes : ['a', 'c'] },
 { name: "y", codes : ['a', 'b'] },
 { name: "z", codes : ['b','c'] }
];

var form = document.querySelector("form");
form.addEventListener("change", function() {

  let filtered = people;

  const selections = document.querySelectorAll('[type="checkbox"]:checked');
  
  if (selections) {
    const values = [...selections].map(x => x.value);
    filtered = people.filter(person =>
      values.every(code => 
        person.codes.includes(code)
      )
    )
  }
      
  // Just to display something
  console.log(filtered.map(f => f.name).join(","));
});  

 <form id="form">
  <label for="a">A</label><input type="checkbox" id="a" value="a" />
  <label for="b">B</label><input type="checkbox" id="b" value="b" />
  <label for="c">C</label><input type="checkbox" id="c" value="c" />
</form>