变量未在更改时更新-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数组中清除先前循环的结果。