jQuery jQuery复选框值到逗号分隔列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9593237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery checkbox values to comma separated list
提问by 24creative
I have several checkboxes with a name array and I want the output of the checked boxes to be a variable with a comma separated list.
我有几个带有名称数组的复选框，我希望复选框的输出是一个带有逗号分隔列表的变量。
<input type="checkbox" name="example[]" value="288" />
<input type="checkbox" name="example[]" value="289" />
<input type="checkbox" name="example[]" value="290" />
For example if the first and last box are selected the output will be:
例如，如果选择了第一个和最后一个框，输出将是：
var output = "288,290";
How can I do this with jQuery?
我怎样才能用 jQuery 做到这一点？
回答by Selvakumar Arumugam
You can use :checkboxand name attribute selector (:checkbox[name=example\\[\\]]) to get the list of checkbox with name="example[]"and then you can use :checkedfilter to get only the selected checkbox.
您可以使用:checkbox和命名属性选择器 ( :checkbox[name=example\\[\\]]) 来获取复选框列表，name="example[]"然后您可以使用:checked过滤器仅获取选定的复选框。
Then you can use .mapfunction to create an array out of the selected checkbox.
然后您可以使用.map函数从选定的复选框中创建一个数组。
var output = $.map($(':checkbox[name=example\[\]]:checked'), function(n, i){
return n.value;
}).join(',');
回答by David says reinstate Monica
Currently un-tested, but I believe the following should work:
目前未经测试，但我相信以下应该有效：
var valuesArray = $('input:checkbox:checked').map( function () {
return $(this).val();
}).get().join();
Edited, after a small break, to use native DOM, rather than $(this).val()(which is needlessly expensive, in context):
稍作休息后，编辑为使用本机 DOM，而不是$(this).val()（在上下文中这是不必要的昂贵）：
var valuesArray = $('input:checkbox:checked').map( function() {
return this.value;
}).get().join(",");
回答by Faisal
var valuesArray = $('input[name="valuehere"]:checked').map(function () { return this.value; }).get().join(",");
var valuesArray = $('input[name="valuehere"]:checked').map(function () { return this.value; }).get().join(",");
works for me always
总是对我有用
回答by Developer
jQuery how to get multiple checkbox's value and output as comma separated String list.
jQuery 如何获取多个复选框的值并输出为逗号分隔的字符串列表。
https://www.tutsmake.com/jquery-multiple-checkbox-values-to-comma-separated-string/
https://www.tutsmake.com/jquery-multiple-checkbox-values-to-comma-separated-string/
$(document).ready(function() {
$(".btn_click").click(function(){
var programming = $("input[name='programming']:checked").map(function() {
return this.value;
}).get().join(', ');
alert("My favourite programming languages are: " + programming);
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Values of Selected Checboxes</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<form>
<h3>Select your favorite Programming Languages :</h3>
<label><input type="checkbox" value="PHP" name="programming"> PHP</label>
<label><input type="checkbox" value="Java" name="programming"> Java</label>
<label><input type="checkbox" value="Ruby" name="programming"> Ruby</label>
<label><input type="checkbox" value="Python" name="programming"> Python</label>
<label><input type="checkbox" value="JavaScript" name="programming"> JavaScript</label>
<label><input type="checkbox" value="Rust" name="programming">Rust</label>
<label><input type="checkbox" value="C" name="programming"> C</label>
<br>
<button type="button" class="btn_click" style="margin-top: 10px;">Click here to Get Values</button>
</form>
</body>
</html> 