CODEWITHSUNDEEP
jquerycheckboxinput
Ken Ryan
Ken Ryan

Reputation: 549

How to Grab multiple values from checkboxes with Jquery

I currently have this form 

 <form class='lostKittieForm'>


      <label class="kittieColor"><input type="checkbox" value="Black">Black</label>
      <label class="kittieColor"><input type="checkbox" value="Brown">Brown</label>
      <label class="kittieColor"><input type="checkbox" value="White">White</label>
      <label class="kittieColor"><input type="checkbox" value="Gray">Gray</label>
      <label class="kittieColor"><input type="checkbox" value="Orange">Orange</label>
      <label class="kittieColor"><input type="checkbox" value="Multicolored">Multicolored</label>

      <input type="submit">

 </form>

My Jquery code is trying to grab all the values checked but for some reason it's only grabbing one and "Black"

 kittie.color =  $(".lostKittieForm input[type='checkbox']").val();

Thanks in advance!

Upvotes: 0

Views: 430

Answers (4)

Skyprenet
Skyprenet

Reputation: 60

kittie.color = $("input:checked").each(function() {alert($(this).val());});

here is the code to get the value

Upvotes: 1

Harshul Pandav
Harshul Pandav

Reputation: 1036

You need a loop

var colorsChecked = [];
$('input:checkbox.class').each(function () {
      colorsChecked.push(this.checked ? $(this).val() : "");
});

Upvotes: 0

Pankaj Goyal
Pankaj Goyal

Reputation: 1548

try this :

var kittieColor = new Array();
$('.kittieColor').each(function() {
    if ($(this).find('input').is(':checked')) {
        kittieColor.push($(this).find('input').val());
    }         
});

alert(JSON.stringify(kittieColor));

Upvotes: 0

Vikrant Vir Bhalla
Vikrant Vir Bhalla

Reputation: 299

$("checkbox").each(function(e){

var checkVal = $(this).val();

});

OR 

$('.lostKittieForm input:checked').each(function() {
    var checkVal = $(this).val();
}); // will return the value for "checked" checkboxes

The loop will run for each checkbox and you can get the value of every checkbox in checkVal Variable one by one .

for Documentation of .each() go to .

http://api.jquery.com/each/

Upvotes: 3

Related Questions