Get multiple checkbox values with javascript

Question

I have this form which i submit using ajax and jquery , well, i have this multiple checkbox from which i get some values.

Now i am doing an error here since the values of the checkbox are not being posted in the database.. Here is the html/php part :

  while($row = mysql_fetch_assoc( $result )) {
    echo '<input type="checkbox" value="'.$row['regione'].'" id="regioni_gestite_ag" name="regioni_gestite_ag[]">' . $row['regione'] . '<br>';
    }

This is how i get it with javascript:

var js_regioni_gestite_ag = $('input:checkbox[name=regioni_gestite_ag]:checked').val();

If i echo the value, i get undefined... Why is it so?

try using $('input:checkbox[name=regioni_gestite_ag[]]:checked') instead. — Stock Overflaw
– Stock Overflaw, Commented Sep 21, 2012 at 12:11
ids are singular! You have more than one checkbox with the same id. — epascarello
– epascarello, Commented Sep 21, 2012 at 12:15
It works if i use plain php , which means it must be the problem with js! — Kledi
– Kledi, Commented Sep 21, 2012 at 12:17
@Kledi See my response. It checks if any boxes are checked and if so, gets their values. — web-nomad
– web-nomad, Commented Sep 21, 2012 at 12:33

Jon · Accepted Answer · 2012-09-21 12:17:37Z

2

Because you are not specifying the name attribute correctly. The selector should be

$('input[name="regioni_gestite_ag[]"]:checkbox:checked')

However, that will still not make everything work because .val() only returns the value of the first matched element (so it will only apply to the first checkbox).

Finally, your PHP code produces multiple elements with the same id attribute, which is illegal HTML and will make random jQuery and/or DOM APIs not work correctly. This should be fixed immediately, perhaps by removing the id entirely?

Update: to get the values of all checkboxes as an array you can use

var values = $.makeArray($('input[name="regioni_gestite_ag[]"]:checkbox:checked')
                          .map(function() { return $(this).val() }));

edited Sep 21, 2012 at 12:17

answered Sep 21, 2012 at 12:11

Jon

439k85 gold badges756 silver badges820 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Stock Overflaw Over a year ago

ah right, forgot about that, we should use .each + $(this).val(), right?

Jon Over a year ago

@Kledi: The selector works just fine. If you still have trouble after reading the answer please be more specific.

Jon Over a year ago

@StockOverflaw: Yes, if you want to get all the values that's one way to go (.map() is another).

Kledi Over a year ago

Hey, could you please update the answer with that, .each + $(this.... i have no idea where to put this in javascript.. i'll try it then maybe thee's something else wrong..

Kledi Over a year ago

Thanks, but unfortunately it doesn't work.. now lease let me show you how i print the values which tell me undefined: $postRegioni_gestite_ag = $_POST["postRegioni_gestite_ag"];

|

web-nomad · Accepted Answer · 2012-09-21 12:44:28Z

0

Try this:

var js_regioni_gestite_ag = [];//[name="regioni_gestite_ag[]"]
if($('input[name="regioni_gestite_ag[]"][type=checkbox]:checked').length){
    // check if any checkboxes are checked
    $('input[name="regioni_gestite_ag[]"][type=checkbox]:checked').each(function(o){
        // get their values
        js_regioni_gestite_ag.push($(this).val());
    });
}

// clears all selected checkboxes
function clearSelection() {
    $('input[name="regioni_gestite_ag[]"][type=checkbox]:checked').each(function(o){
        $(this).removeAttr('checked');
    });
}

Hope this helps.

edited Sep 21, 2012 at 12:44

answered Sep 21, 2012 at 12:28

web-nomad

6,0133 gold badges37 silver badges49 bronze badges

7 Comments

Kledi Over a year ago

Thanks, it doesn't work because apparently, i am outputting the wrong way the form, it takes the values from the id, not the name..

Kledi Over a year ago

I'll have to accept this :) it worked, i had an error inside the form, apparently :) thanks a lot!

Kledi Over a year ago

but one question please, how can i clear the form after submission? this is how i do it now: $("#regioni_gestite_ag").prop("checked", false);

Pablo Over a year ago

You should avoid using :checkbox selector extension, since it is deprecated (for eventual removal). Instead, use [type="checkbox"] bugs.jquery.com/ticket/9400

web-nomad Over a year ago

@Kledi - Use the clearSelection function to clear all checkboxes.

|

Nelson Benítez León · Accepted Answer · 2012-09-21 12:12:14Z

0

Try with starts-with selector (^=) , like so:

var js_regioni_gestite_ag = $('input:checkbox[name^=regioni_gestite_ag]:checked').val();

answered Sep 21, 2012 at 12:12

Nelson Benítez León

51k8 gold badges70 silver badges84 bronze badges

Collectives™ on Stack Overflow

Get multiple checkbox values with javascript

3 Answers 3

10 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related