jQuery checkbox values to comma separated list
Question
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?
4 answers
solution1
33 2012-03-06 22:59:52
You can use :checkbox and name attribute selector ( :checkbox[name=example\\[\\]] ) to get the list of checkbox with name="example[]" and then you can use :checked filter to get only the selected checkbox.
Then you can use .map function to create an array out of the selected checkbox.
var output = $.map($(':checkbox[name=example\\[\\]]:checked'), function(n, i){
return n.value;
}).join(',');
solution2
12 2012-03-06 22:57:08
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):
var valuesArray = $('input:checkbox:checked').map( function() {
return this.value;
}).get().join(",");
solution3
5 2019-04-20 09:51:47
jQuery how to get multiple checkbox's value and output as comma separated String list.
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>
solution4
4 2014-06-03 11:27:52
var valuesArray = $('input[name="valuehere"]:checked').map(function () { return this.value; }).get().join(",");
works for me always
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.