Javascript 按钮上显示的多选复选框值

我已经创建了一个多选ui组件，在其中我必须将所选值推送到一个数组中，并在按钮值中显示相同的值。我正在警报框中获取所选值，但无法在按钮中获取

单击复选框后，请帮助我将所选项目值显示为按钮值

片段：

函数getCheckedCheckboxesFor（checkboxName）{ var checkboxes=document.querySelectorAll（'input[name=“”+checkboxName+”]：checked'）， 值=[]； Array.prototype.forEach.call（复选框、函数（el）{ 推送值（el值）； }); 返回值； }

。选中多个{
显示：内联块；
高度：60px；
溢出y：滚动；
边框：1px纯色灰色；
}
.检查多个输入{
浮动：左；
}
.检查多个标签{
显示：内联块；
}
.检查多个跨度{
显示：内联块；
宽度：100%；
}
.检查多个输入：已检查~span{
背景：#03f；
颜色：白色；
}

汽车
小型摩托车
公共汽车

你的问题有点奇怪，这就是你想要实现的目标吗

编辑：使用onchange事件触发复选框上按钮文本的更改值

函数getCheckedCheckboxesFor（checkboxName）{ } 函数myFunction（val）{ var checkbox=document.querySelectorAll（'input[name=“”+val+'”]：checked'）， 值=[]； Array.prototype.forEach.call（复选框、函数（el）{ 推送值（el值）； }); document.getElementById（“demo”）.value=value； }

。选中多个{
显示：内联块；
高度：60px；
溢出y：滚动；
边框：1px纯色灰色；
}
.检查多个输入{
浮动：左；
}
.检查多个标签{
显示：内联块；
}
.检查多个跨度{
显示：内联块；
宽度：100%；
}
.检查多个输入：已检查~span{
背景：#03f；
颜色：白色；
}

汽车
小型摩托车
公共汽车

你的问题有点奇怪，这就是你想要实现的目标吗

编辑：使用onchange事件触发复选框上按钮文本的更改值

函数getCheckedCheckboxesFor（checkboxName）{ } 函数myFunction（val）{ var checkbox=document.querySelectorAll（'input[name=“”+val+'”]：checked'）， 值=[]； Array.prototype.forEach.call（复选框、函数（el）{ 推送值（el值）； }); document.getElementById（“demo”）.value=value； }

。选中多个{
显示：内联块；
高度：60px；
溢出y：滚动；
边框：1px纯色灰色；
}
.检查多个输入{
浮动：左；
}
.检查多个标签{
显示：内联块；
}
.检查多个跨度{
显示：内联块；
宽度：100%；
}
.检查多个输入：已检查~span{
背景：#03f；
颜色：白色；
}

汽车
小型摩托车
公共汽车

阅读您的评论后，
以下可能是您想要实现的目标：

//添加了以下内容：
var checkbox=document.querySelectorAll（'input[type=checkbox]）；
复选框。forEach（函数（chkbx）{
chkbx.onchange=函数（）{
document.getElementById（“按钮”）.value=getCheckedCheckboxesFor（chkbx.name）；
}
})
//简化一点：
函数getCheckedCheckboxesFor（名称）{
var checkeds=document.querySelectorAll（'input[name=“”+name+”]：checked'），
值=[]；
checkeds.forEach（功能（chkd）{
推送值（chkd.value）；
});
返回值；
}

。选中多个{
显示：内联块；
高度：60px；
溢出y：滚动；
边框：1px纯色灰色；
}
.检查多个输入{
浮动：左；
}
.检查多个标签{
显示：内联块；
}
.检查多个跨度{
显示：内联块；
宽度：100%；
}
.检查多个输入：已检查~span{
背景：#03f；
颜色：白色；
}

汽车
小型摩托车
公共汽车

阅读您的评论后，
以下可能是您想要实现的目标：

//添加了以下内容：
var checkbox=document.querySelectorAll（'input[type=checkbox]）；
复选框。forEach（函数（chkbx）{
chkbx.onchange=函数（）{
document.getElementById（“按钮”）.value=getCheckedCheckboxesFor（chkbx.name）；
}
})
//简化一点：
函数getCheckedCheckboxesFor（名称）{
var checkeds=document.querySelectorAll（'input[name=“”+name+”]：checked'），
值=[]；
checkeds.forEach（功能（chkd）{
推送值（chkd.value）；
});
返回值；
}

。选中多个{
显示：内联块；
高度：60px；
溢出y：滚动；
边框：1px纯色灰色；
}
.检查多个输入{
浮动：左；
}
.检查多个标签{
显示：内联块；
}
.检查多个跨度{
显示：内联块；
宽度：100%；
}
.检查多个输入：已检查~span{
背景：#03f；
颜色：白色；
}

汽车
小型摩托车
公共汽车

这似乎工作正常。我在点击按钮时收到警报中选中复选框的值。“你到底想要什么？”prady说，它起作用了。但是我想在按钮上显示所选的值。好的，然后参考下面的答案。@prady我可以不点击按钮就在按钮上获得这些值吗？我只是想告诉你，因为你可能还没有看到它。我更新了我的答案，并添加了另一个代码片段和更多的代码来处理多个元素！这似乎很有效。我在点击按钮时收到警报中选中复选框的值。“你到底想要什么？”prady说，它起作用了。但是我想在按钮上显示所选的值。好的，然后参考下面的答案。@prady我可以不点击按钮就在按钮上获得这些值吗？我只是想告诉你，因为你可能还没有看到它。我更新了我的答案，并添加了另一个代码片段和更多的代码来处理多个元素！我怎样才能在不点击按钮的情况下获得这些值：谢谢你们的帮助。我赞成你的答案。这正是我想要的。但Takit Isy的做法更为谨慎。所以，选择他的答案。@Era I