javascript - 使用 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>