使用JavaScript将复选框值加载到字符串中

我希望访问者能够做的是：勾选他们想查询的产品的任意数量的复选框，并在他们勾选第一个后在页面底部显示一个链接。他们点击链接，它会自动填充表单

我已经使用查询使用了后一部分，但是我需要获取逗号分隔的复选框值，并将它们输入到一个字符串中，以便在我的链接中使用-例如，如果我的复选框代码是：

像这样获取您的值字符串

var checked = Array.prototype.slice.call(document.querySelectorAll('.products:checked')).map(function(el){
  return el.value;
}).join(',');

---

然后创建一个包含所有这些内容的

和一个
更改
侦听器
这应该会得到您需要的：

var checked = Array.prototype.slice.call(document.querySelectorAll('[name=selected]:checked'));
var values = checked.map(function(el) {
  return el.value;
});

console.log(values.join(','));

es6版本：

let checked = Array.from(document.querySelectorAll('[name=selected]:checked'));
let values = checked.map(el => el.value);

console.log(values.join(','));

看起来下面的代码生成了字符串


$（“按钮”）。在（“单击”，函数（）{
var arr=[]
$（“：复选框”）。每个（函数（）{
如果（$（this）.is（“：checked”））{
arr.push（$（this.val（））
}
})
var VAL=arr.join（“，”）
var str=”http://example.com/?subject=Products&“+VAL
console.log（str）
})

蓝色

绿色

紫色


按钮
是否实际使用jQuery？尝试使用
var checkedValues=$（'.products:checkbox:checked'）.map（函数（）{return$（this.attr（'value'）；}）嘿@Robiseb-我不知道你的意思。。。从我的各种例子来看，类似于上面的代码通常会得到所需的结果，我只是在适应我的特定用途时遇到了困难。请参阅[link]（）或[link]（）是一个著名的JavaScript库，它可以帮助您更轻松地编写一些JavaScript函数/操作/。。。但在你的情况下，我更倾向于建议你学习纯JS。所以检查一下Rob M.的第一部分答案。啊，我现在和你在一起。我很乐意使用任何东西，但也不完全理解。我只接受过HTML、CSS和PHP方面的培训，所以了解JavaScript或jQuery有点困难。谢谢你的帮助：）对我来说很好，但是我该如何提取逗号分隔的值并将其打印到我的url字符串中呢？看起来好像它正在正确地检索它们，我只是无法让它们真正显示出来。这太棒了！但是，是否可以在勾选复选框时动态加载值，而不是通过按钮。那么按钮是否有可能被生成的链接替换？您可以动态设置值。我不确定这是否是你想要的。我选择向您显示一个按钮，以模拟在提交表单等事件后如何获取复选框的所有值。我不知道为什么在单击复选框后要更改该值。哦，也许你想调查一下。改变（）。点击复选框后会有效果谢谢！我试图做的是在单击以下页面上的复选框时生成一个链接：[link]（）选中第一个复选框后，链接将出现，并且该值应根据所选框动态更改。单击链接时（根据上面的var str），会将它们带到一个表单，该表单预先填充复选框值中的数据。我不能把表格放在同一页上。如果我可以根据所选字段设置按钮，那么按钮的想法可能会奏效，但理想情况下，它应该是一个动态链接。听起来你真的想创建一个
a
标记，每当用户单击复选框时，
href
都会更新。您需要使用
.change（）
。每次用户单击复选框时，
.change
将激活，您将能够测试用户是否单击了复选框。因此，您将能够更新
a
标记。这有点像另一个问题。在jquery上寻找.change（）的例子，并享受乐趣。很棒的建议！我不能否认你已经回答了这个问题的标题！我可能会问另一个更密切相关的链接想法：）谢谢！令人惊叹的！另一个noob问题。。。如何使用console.log值以字符串的形式实际检索值？我需要做的是使用console.log（“”+选中）；要创建链接，用户实际上可以单击。
// HTML
<div id="myEmptyDiv"></div>
// JS
document.getElementById('myEmptyDiv').innerHTML = aEl;

var checked = Array.prototype.slice.call(document.querySelectorAll('[name=selected]:checked'));
var values = checked.map(function(el) {
  return el.value;
});

console.log(values.join(','));

let checked = Array.from(document.querySelectorAll('[name=selected]:checked'));
let values = checked.map(el => el.value);

console.log(values.join(','));