Get check box values with JS

Question

So i have 2 categories of checkboxes.

  <input type="checkbox" name="foo"  value="val1" />
  <input type="checkbox" name="foo"  value="val2" />


  <input type="checkbox" name="bar"  value="val1" />
  <input type="checkbox" name="bar"  value="val2" />

When a box is checked I want to run a jQuery function that will assign two variables

  var foo = //the values of the checked boxes with the foo name
  var bar = //the values of the checked boxes with the bar name

So lets say only the first check box was checked in the foo group where as both were checked in the bar group. The groups values would be as follows

 var foo = val1;
 var bar = val1,val2;

What is the best way to search through all checkboxes that share the same name/class Look to see if they are checked and if so add their value to a string?

see http://stackoverflow.com/questions/416752/select-values-of-checkbox-group-with-jquery — Fortega, Jun 27 '11 at 07:39

score 2 · Answer 1 · answered Jun 27 '11 at 07:47

2

Get all checked checkboxes :

$(':checkbox').is(':checked').each(function() {
   if ($(this).value) {
     //get values here
   }
});

Get all checkboxes :

$(':checkbox').each(function() {
   if ($(this).value) {
     //get values here
   }
});

answered Jun 27 '11 at 07:47

Marc Uberstein

12,501
3
44
72

Does he really want to get all of them ? – Giann Jun 27 '11 at 07:56
Not really, but I've added the look-for-all in case he wants to use all checkbox values to manipulate further process in his site. – Marc Uberstein Jun 27 '11 at 08:04

score 2 · Accepted Answer · answered Jun 27 '11 at 08:03

You can try something like

 var foo = $("input:checkbox[name='foo']:checked").map(function(){
                            return this.value;
                        }).get().join(',');

 var bar = $("input:checkbox[name='bar']:checked").map(function(){
                            return this.value;
                        }).get().join(',');

See a working demo

score 1 · Answer 3 · answered Jun 27 '11 at 07:39

1

jQuery :checked selector to the rescue.

answered Jun 27 '11 at 07:39

jerluc

4,186
2
25
44

I've looked at that but I can't get a list of values for my life. – endy Jun 27 '11 at 07:42
`$('input:checked[name=foo]').val()` will give you the current value checked for "foo" – jerluc Jun 27 '11 at 07:47

score 1 · Answer 4 · answered Jun 27 '11 at 07:42

1

Give your checkboxes a common class, then:

$('.classofcheckbox').each(function() {
   if ($(this).val()) {
     // do stuff...
   }
});

Or more directly

$('.classofcheckbox:checked').each(function() {
   // do stuff...
});

answered Jun 27 '11 at 07:42

Giann

3,142
3
23
33

score 1 · Answer 5 · answered Jun 27 '11 at 07:48

1

function checkedBoxesToString(name) {
    var checked = [];
    $('[name=' + name + ']:checked').each(function (a, b) {
        checked.push($(b).val());
    });
    return checked.join(",");
}

answered Jun 27 '11 at 07:48

Bemmu

17,849
16
76
93

Get check box values with JS

5 Answers5