变量不会随着变化而更新 - 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

你让自己的生活变得不必要地困难。 如果您想在每次单击复选框时获取一组已检查的 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()

Answer 3

感谢答案，但由于某种原因它们不起作用。

做了一些摆弄并以这种方式解决了它：

  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数组中清除之前的循环结果。