Javascript 使用每个按钮将选中的复选框值推送到数组

如你们所见，我有一个复选框组，每个复选框都有值

我使用以下函数来查找选中的复选框，并将同一复选框的值推送到数组中，如下所示：

[“1”、“2”、“3”、“4”、“5”]

当前调试结果：

选中一个复选框-数组：['1']

选中两个复选框-数组：['1'，'2'，'2']

选中三个复选框-数组：['1'，'2'，'2'，'3'， ‘3’、‘3’]

.right.left.all

每次选中复选框时都会出现，然后您可以选择将复选框值放入哪个数组

我知道问题是，每次更改我都会引用几次，我需要去掉

.change（）

问题是，我找不到任何合适的替代代码，我尝试用if语句替换

.change（）

函数，但没有成功

---

如何将多个复选框值推入数组而不进行任何复制？

此操作不需要循环：

$box.on('change', function(){
    $('#choose').addClass('active');
    $val = $(this).val();
    $( ".all" ).click(function() {
        all.push($val);
        $('#choose').removeClass('active');
        console.log(all);
    });
    $( ".left" ).click(function() {
        left.push($val);
        $('#choose').removeClass('active');
    });
    $( ".right" ).click(function() {
        right.push($val);
        $('#choose').removeClass('active');
    });
});

---

您可以直接在JQuery选择器上调用change event。

获取数组中复选框值的最快方法是使用

map（）

和

filter（）

方法，如下所示：

const checked = $box.filter(':checked').map((i,c) => c.value).get();

const all = $box.filter('.all:checked').map((i,c) => c.value).get();
const left = $box.filter('.left:checked').map((i,c) => c.value).get();
const right = $box.filter('.right:checked').map((i,c) => c.value).get();

每次选中/取消选中复选框时，

checked

数组中的值都会更新

注意

您尚未说明以下选择器所指的内容：

.left

，

.all

，

。right

，

。\choose

。如果前三个选择器是复选框的附加类，则您可以按以下步骤进行操作：

const checked = $box.filter(':checked').map((i,c) => c.value).get();

const all = $box.filter('.all:checked').map((i,c) => c.value).get();
const left = $box.filter('.left:checked').map((i,c) => c.value).get();
const right = $box.filter('.right:checked').map((i,c) => c.value).get();

每次复选框状态更改时，阵列也会更新

但是，如果这些选择器引用了一些其他元素，那么您必须在问题和代码中明确这一点。请查看下面的演示：

演示

$（文档）.ready（函数（）{
$box=$（'.ppom检查输入'）；
$box.on（'change'，function（）{
const checked=$box.filter（':checked'）.map（（i，c）=>c.value.get（）；
控制台日志（选中）；
常量all=$box.filter（'.all:checked'）.map（（i，c）=>c.value.get（）；
常量left=$box.filter（'.left:checked'）.map（（i，c）=>c.value.get（）；
const right=$box.filter（'.right:checked'）.map（（i，c）=>c.value.get（）；
console.log（全部、左侧、右侧）；
});
});

同样的结果，我需要替换
更改
，因为他是这里的麻烦制造者。你能在codepen或类似的东西上显示你的代码吗？正如我所说，这是大型PHP插件的一部分，不可能在codepen中共享。但我将尝试在codepen中制作一些模型，并在我完成后与您共享。您应该将此代码置于循环之外，并更改事件“$”（“.all”）。单击（function（）{all.push（$val）；$（'#choose'）。removeClass（'active'）；console.log（all）；}）$（“.left”）。单击（函数（）{left.push（$val）；$（'#choose'）。removeClass（'active'）；}）$（“.right”）。单击（function（）{right.push（$val）；$（'#choose'）。removeClass（'active'）；}）`如果不参考您的实现，您可以清楚地解释您的目标是什么。清楚地描述您的标记、事件和目标！！至少给我们一个最低限度的可复制样本。@PeterKA我试着重新表述我的问题，看一看每次改变触发，它会绑定另一个事件……@Epasarello我怎么能避免呢？你没有说太多不同的话。这些元素是什么：
.all
、
.left
、
.right
以及对应的数组用于什么<代码>#选择

？Codepen中的示例没有这些元素，因此该示例不会重现您在此处描述的内容。谢谢您的回答，我已更新了我的Codepen，请看一看演示。玩玩它。看看它是否有用。我已经试着正确地实现了它，我在演示2中得到了相同的结果没有重复