17

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?

BenMorel
  • 31,815
  • 47
  • 169
  • 296
24creative
  • 669
  • 2
  • 9
  • 14
  • possible duplicate of [jQuery Array of all selected checkboxes (by class)](http://stackoverflow.com/questions/2099164/jquery-array-of-all-selected-checkboxes-by-class) – Felix Kling Mar 06 '12 at 22:56

4 Answers4

32

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.

DEMO

var output = $.map($(':checkbox[name=example\\[\\]]:checked'), function(n, i){
      return n.value;
}).join(',');
Selvakumar Arumugam
  • 78,145
  • 14
  • 119
  • 133
  • Hmmm, this seems to return a list of all (checked) checkboxes even with those without the name of example[]. e.g. http://jsfiddle.net/6LCvN/ . Any idea why? – Hugh Apr 10 '13 at 03:40
  • @Hugh Missed it somehow, but you need double slashes to escape the `[` and `]` http://jsfiddle.net/6LCvN/22/ or wrap in quotes http://jsfiddle.net/hmtdtwbr/ – Selvakumar Arumugam Nov 25 '14 at 20:47
12

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(",");
Subedi Kishor
  • 5,778
  • 5
  • 33
  • 52
David Thomas
  • 240,457
  • 50
  • 366
  • 401
5

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>
Developer
  • 810
  • 10
  • 6
4
var valuesArray = $('input[name="valuehere"]:checked').map(function () {  
        return this.value;
        }).get().join(",");

works for me always

Faisal
  • 190
  • 1
  • 10