使用JavaScript将复选框的值加载到字符串中
我希望访问者能够做的是：勾选他们希望查询的产品的任意数量的复选框，并在首先勾选后在页面底部显示链接。 他们点击链接并自动填写表单。
我有后面的部分使用查询，但我需要得到逗号分隔的复选框值并将它们输入到用于链接的字符串中 - 即，如果我的复选框代码是：
<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">它看起来像下面产生的字符串。
$("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>像这样获取你的字符串值
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;
这里有一个小提琴，有所有这些东西和一个change倾听者
这应该得到你需要的东西：
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(','));