jQuery, checkbox checked

Question

I have the following code :

<form>
<input type="checkbox" name="type" value="Club" onclick="getselectedcheckbox()"checked/>Club<br/>
<input type="checkbox" name="type" value="Pub" onclick="getselectedcheckbox()" checked/>Pub<br/>
<input type="checkbox" name="type" value="Home" onclick="getselectedcheckbox()"/>Home<br/>
<input type="checkbox" name="type" value="Concert" onclick="getselectedcheckbox"/>Concert<br/>

<script>
function displayVals() {
var checkedValues = $('input:checkbox:checked').map(function() {
    alert(this.value);
});
   }

$( "select" ).change( displayVals );
displayVals();
</script>

I am trying to get all the checkbox checked, to then send it with ajax. But right now, I have 1 different alert for each checkboxes, is there a way to get all the checked values in one string ?

I've heard of .join(), but I don't really know where to put it in my code. Still beginning with Javascript / jquery :/

Any ideas ?

Thanks, Loneept

possible duplicate of [jQuery get values of checked checkboxes into array](http://stackoverflow.com/questions/16170828/jquery-get-values-of-checked-checkboxes-into-array) — Ehsan Sajjad, Mar 17 '15 at 12:16

StateLess · Answer 1 · 2015-03-17T12:21:59.950

4

Declare a array and push all the values into it, example:

   var selected = [];
   function displayVals() {
      var checkedValues = $('input:checkbox:checked').each(function() {
         selected.push(this.value);
      });
   }

 var stringArray =  selected.join();

use array join to convert array to string

edited Mar 17 '15 at 12:21

answered Mar 17 '15 at 12:12

StateLess

5,344
3
20
29

2

This isn't answering question which is how to get a string – A. Wolff Mar 17 '15 at 12:14

score 3 · Accepted Answer · answered Mar 17 '15 at 12:18

3

Is there a way to get all the checked values in one string ?

In your map, return the checkbox value, then use get() which retrieves the JavaScript array of values from the jQuery object. Finally, use join() to convert to a comma separated string.

var checkedValues = $('input:checkbox:checked').map(function() {
    return this.value;
}).get().join(',');

The result would be (with all checked):

Club,Pub,Home,Concert

answered Mar 17 '15 at 12:18

MrCode

63,975
10
90
112

1

This answering question as asked but as OP wants to send it using ajax, this seems better to serialize the FORM imho – A. Wolff Mar 17 '15 at 12:19
1

Thanks, this works perfectly. I'll look into the serialize later, when i'll want to optimize the code :) – Loneept Mar 17 '15 at 12:51

Manwal · Answer 3 · 2015-03-17T12:23:09.963

1

Give a form id like myform and simply use:

$('#myform').serialize();

Note: It will not give unchecked checkboxes values

If you want to get unchecked values also then you need to explicitly set unchecked checkboxe's value false before serialize.

$('#myform').find(':checkbox:not(:checked)').attr('value', false);

edited Mar 17 '15 at 12:23

answered Mar 17 '15 at 12:17

Manwal

23,450
12
63
93

score 0 · Answer 4 · answered Mar 17 '15 at 12:14

0

Try this

function displayVals() {
    var names = $('input[type="checkbox"]:checked').map(function() {
      return this.value;
    }).get();

     return names;
}

answered Mar 17 '15 at 12:14

Ruprit

733
1
6
23

score 0 · Answer 5 · answered Mar 17 '15 at 12:18

0

Try to select every input called = "type". You'll have to modify the inputtag in displayVals like this

function displayVals() {
var checkedValues = $('input[name=type]:checked').map(function() {
alert(this.value);
});

answered Mar 17 '15 at 12:18

riciloma

1,456
2
16
31

jQuery, checkbox checked

5 Answers5