use jQuery to get values of selected checkboxes

Question

I want to loop through the checkboxgroup 'locationthemes' and build a string with all selected values. So when checkbox 2 and 4 are selected the result would be: "3,8"

<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>

I checked here: http://api.jquery.com/checked-selector/ but there's no example how to select a checkboxgroup by its name.

How can I do this?

Fabrizio Calderan · Accepted Answer · 2018-11-19T14:10:08.253

In jQuery just use an attribute selector like

$('input[name="locationthemes"]:checked');

to select all checked inputs with name "locationthemes"

console.log($('input[name="locationthemes"]:checked').serialize());

//or

$('input[name="locationthemes"]:checked').each(function() {
   console.log(this.value);
});

Demo

In VanillaJS

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
   console.log(cb.value); 
});

Demo

In ES6/spread operator

[...document.querySelectorAll('input[name="locationthemes"]:checked')]
   .forEach((cb) => console.log(cb.value));

Demo

Talha · Answer 2 · 2012-07-03T05:02:04.830

41

$('input:checkbox[name=locationthemes]:checked').each(function() 
{
   // add $(this).val() to your array
});

Working Demo

OR

Use jQuery's is() function:

$('input:checkbox[name=locationthemes]').each(function() 
{    
    if($(this).is(':checked'))
      alert($(this).val());
});

edited Jul 03 '12 at 05:02

answered Jul 02 '12 at 11:33

Talha

18,898
8
49
66

score 25 · Answer 3 · answered Mar 03 '16 at 19:08

Map the array is the quickest and cleanest.

var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })

will return values as an array like:

array => [2,3]

assuming castle and barn were checked and the others were not.

usr4217 · Answer 4 · 2019-02-25T08:10:41.923

19

$("#locationthemes").prop("checked")

edited Feb 25 '19 at 08:10

answered May 16 '16 at 15:37

usr4217

420
4
18

1

This should be a comment – Gajendra K Chauhan May 18 '16 at 08:59

score 14 · Answer 5 · answered Mar 24 '15 at 19:13

14

Using jquery's map function

var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
            checkboxValues.push($(this).val());
});

answered Mar 24 '15 at 19:13

MaylorTaylor

4,671
16
47
76

with the understanding that checkboxName should be "locationthemes" in this example – hrabinowitz Aug 03 '15 at 17:14

score 8 · Answer 6 · answered Aug 27 '20 at 09:51

A bit more modern way to do it:

const selectedValues = $('input[name="locationthemes"]:checked').map( function () { 
        return $(this).val(); 
    })
    .get()
    .join(', ');

We first find all the selected checkboxes with the given name, and then jQuery's map() iterates through each of them, calling the callback on it to get the value, and returning the result as a new jQuery collection that now holds the checkbox values. We then call get() on it to get an array of values, and then join() to concatenate them into a single string - which is then assigned to the constant selectedValues.

score 6 · Answer 7 · answered Mar 06 '19 at 18:57

6

var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
     SlectedList.push($(this).val());
});

answered Mar 06 '19 at 18:57

Khurram Shaukat

61
1
3

1

Please provide an explanation with your answer. – Word Rearranger Mar 06 '19 at 19:04

score 5 · Answer 8 · answered Feb 24 '14 at 11:05

5

You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();

answered Feb 24 '14 at 11:05

Tushar

469
1
7
14

1

How to assign this result into variable – Mano Johnbritto Nov 19 '15 at 12:45

score 3 · Answer 9 · answered Jul 02 '15 at 23:05

So all in one line:

var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");

..a note about the selector [id*="checkbox"] , it will grab any item with the string "checkbox" in it. A bit clumsy here, but really good if you are trying to pull the selected values out of something like a .NET CheckBoxList. In that case "checkbox" would be the name that you gave the CheckBoxList control.

1

This is useful @mike – Yii2Developer Jun 01 '20 at 11:59

thecodedeveloper.com · Answer 10 · 2018-08-12T09:21:58.517

Source - More Detail

Get Selected Checkboxes Value Using jQuery

Then we write jQuery script to get selected checkbox value in an array using jQuery each(). Using this jQuery function it runs a loop to get the checked value and put it into an array.

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Get Selected Checkboxes Value Using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".btn").click(function() {
                var locationthemes = [];
                $.each($("input[name='locationthemes']:checked"), function() {
                    locationthemes.push($(this).val());
                });
                alert("My location themes colors are: " + locationthemes.join(", "));
            });
        });
    </script>
    </head>
    <body>
        <form method="POST">
        <h3>Select your location themes:</h3>
        <input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
        <label for="checkbox-1">Castle</label>
        <input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
        <label for="checkbox-2">Barn</label>
        <input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
        <label for="checkbox-3">Restaurant</label>
        <input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
        <label for="checkbox-4">Bar</label>
        <br>
        <button type="button" class="btn">Get Values</button>
    </form>
    </body>
    </html>

score 2 · Answer 11 · answered Apr 27 '20 at 17:17

Jquery 3.3.1 , getting values for all checked check boxes on button click

$(document).ready(function(){
 $(".btn-submit").click(function(){
  $('.cbCheck:checkbox:checked').each(function(){
 alert($(this).val())
  });
 });   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="vehicle1" name="vehicle1"  class="cbCheck" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2"  class="cbCheck" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3"  class="cbCheck" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit" class="btn-submit">

score 1 · Answer 12 · edited May 21 '18 at 13:58

1

var voyageId = new Array(); 
$("input[name='voyageId[]']:checked:enabled").each(function () {
   voyageId.push($(this).val());
});

edited May 21 '18 at 13:58

Saeed

5,413
3
26
40

answered May 21 '18 at 13:26

Anmol Mourya

530
5
7

A upgrade: `var voyageIds = $('input[name="voyageId[]"]:checked:enabled').map(function() {return this.value; }).get();` – William May 22 '20 at 00:15

use jQuery to get values of selected checkboxes

12 Answers12

Linked