Question

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

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

＆＃13;

<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">

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

Answer 1

获取您喜欢的值

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 2

这应该得到你所需要的：

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

Answer 3

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

＆＃13;

$("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)	
})

＆＃13;

<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>

＆＃13;

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

3 个答案: