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

Question

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

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

<input type="checkbox" id="selected" name="selected" value="Blue" class="products"><br>
<input type="checkbox" id="selected" name="selected" value="Green" class="products"><br>
<input type="checkbox" id="selected" name="selected" value="Purple" class="products">

我需要JS生成的字符串为：http://example.com/?subject=Products&checked=Blue,Green,Purple

我已尝试修改此代码（可在此处找到：Best way to get all selected checkboxes VALUES in jQuery），但没有成功：

var checkedValues = $('.products:checkbox:checked').map(function() {
    return this.value;
}).get();

如何将我的复选框值加载到我需要的查询字符串中？

Answer 1

看起来下面会产生字符串。

$("button").on("click", function(){
	var arr = []
	$(":checkbox").each(function(){
	   if($(this).is(":checked")){
		 arr.push($(this).val())
	   }
	})
	var vals = arr.join(",")
	var str = "http://example.com/?subject=Products&" + vals
	console.log(str)	
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="checkbox" id="selected" name="selected" value="Blue" class="products"> Blue<br>
<input type="checkbox" id="selected" name="selected" value="Green" class="products"> Green<br>
<input type="checkbox" id="selected" name="selected" value="Purple" class="products"> Purple
<br>
<button>button</button>

Answer 2

像这样获取你的值字符串

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

然后创建一个<a>元素

var aEl = document.createElement("a");
aEl.setAttribute("href", "http://example.com/?subject=Products&checked=" + checked);

把它放在你想要的地方（例如，在正文的末尾）

document.body.appendChild = aEl;

或者在一个空的存在的<div>

// HTML
<div id="myEmptyDiv"></div>
// JS
document.getElementById('myEmptyDiv').innerHTML = aEl;

这里有一个 Fiddle 和一个 change 听众

Answer 3

这应该可以满足您的需求：

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(','));