Переменная не обновляется при изменении - jQuery

Question

У меня есть массив флажков, при нажатии на которые я хочу сохранить новый массив, чьи флажки установлены, а какие нет. Тем не менее, когда я console.log() новый массив, он все еще заполнен всеми, независимо от того, в каком состоянии они находятся.

Кто-нибудь знает почему?

Код:

// checkboxes
  const blue = $('#blue');
  const green = $('#green');
  const white = $('#white');
  const red = $('#red');
  const black = $('#black');
  const colourless = $('#colourless');
  const multicoloured = $('#multicoloured');

// store checkbox values in an array;
  let colourCheckbox = [
    blue,
    green,
    white,
    red,
    black,
    colourless,
    multicoloured
  ];

// loop through array to find out which ones are checked
  let checkedCheckboxes = $('.colour-checkbox').change(() => {
    colourCheckbox.forEach(element => {
      if ($(element).is(':checked')) {
        return element;
      }
    });
  });

Answer 1

.change() не возвращает массив, он возвращает коллекцию jQuery, с которой вы связываете обработчик.

Вам необходимо присвоить переменную внутри функции обработчика. И вам нужно использовать .filter().

let checkedCheckboxes;
$('.colour-checkbox').change(function() {
    checkCheckboxes = colourCheckboxes.filter(el => el.is(':checked')).get();
});

Answer 2

Ценю ответы, но по какой-то причине они не сработали.

Немного повозился и решил это следующим образом:

  let colourCheckbox = [
    blue,
    green,
    white,
    red,
    black,
    colourless,
    multicoloured
  ];

  let checkedCheckboxes = [];

  $('.colour-checkbox').change(() => {
    checkedCheckboxes.length = 0;
    colourCheckbox.forEach(element => {
      if ($(element).is(':checked')) {
        checkedCheckboxes.push(element);
      }
    });
  });

Сначала инициализировал пустой массив, затем включил change, перебрал массив colourCheckbox и поместил поля :checked в пустой массив. Наконец, используется checkedCheckboxes.length = 0; для очистки предыдущих зацикленных результатов из массива checkedCheckboxes.

Answer 3

Вы делаете жизнь излишне сложной для себя. Если вы хотите получать коллекцию проверенных элементов DOM каждый раз, когда один из флажков был установлен, вы можете сделать:

let allBtns=$('#blue,#green,#white,#red,#black'
+',#colourless,#multicoloured');
let chkd;
allBtns.click(e=>chkd=allBtns.filter(':checked'))

Это даст вам выбор jQuery (chkd) со всеми отмеченными флажки в нем. Эти строки содержат все, что вам нужно сделать.

Если вы хотите использовать массив простых элементов DOM вместо jQuery, вы можете применить к нему .toArray():

let DOMarr=chkd.toArray()