Jquery select multiple checkboxes

Question

I have a list of categories paired with checkboxes. I can't find any documentation on how to store all the selected checkboxes in a var and send the data to the server. I need to delete from the database the selected categories. This is part of the code I'm working on.

var cat_id = $('check_box').attr("id"); //gets the id of the checked category
var dataString = 'cat_id=' + cat_id; //should send all the selected checkbox IDs
$('.delete').click(function() 
{
    $.ajax({
        type: "POST",
        url: "edit_categories.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
            window.location.reload(true);
        }
    });//end ajax
});//end click function

The checkboxes are created dynamically using:

<input type="checkbox" name="check_box" class="check_box" 
    id="<?php echo $cat_id; ?>" />

Each checkbox will have a unique id and how many they are varies.

In the edit_categories.php I just have an mysql for deleting the categories where cat_id = $_POST['cat_id'] but I can't figure out how to get all the IDs from the selected checkboxes.

Nick Craver · Accepted Answer · 2010-07-31 02:16:46Z

3

You can use .map() to get a string of checkbox IDs, like this:

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

This would produce a string like "CheckBox1,Checkbox2,Checkbox3" for sending server-side. There you can just do a .split(",") on the string to get an array of the IDs to work with.

answered Jul 31, 2010 at 2:16

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

Comments

Ian Wood · Accepted Answer · 2010-07-31 02:10:42Z

0

$('form').serialize() may be of use - have a look at ajaxForm which is awesome...

for your check boxes - change the name to 'check_box[]' and set the value to the cat_id as opposed to its ID.

you should then be able to access $_POST['cat_id] which should be an array of the posted values. check it using var_dump( $_POST['cat_id'] );

answered Jul 31, 2010 at 2:10

Ian Wood

6,5736 gold badges36 silver badges75 bronze badges

1 Comment

vii Over a year ago

thanks! I'll try this :) serialize() seems like a handy function

Tahbaza · Accepted Answer · 2010-07-31 02:12:22Z

0

Try something like this:

var keysToDelete = '';
$('.check_box:checked').each(function() { 
  keysToDelete+= $(this).attr("id");
});

dataString= 'cat_id='+keysToDelete;
// continue down to the ajax post

answered Jul 31, 2010 at 2:12

Tahbaza

9,5542 gold badges28 silver badges39 bronze badges

2 Comments

vii Over a year ago

Cool this works too! Thanks!! Do you know how to put space between the id's? It appears as cat_id=1234567

Tahbaza Over a year ago

change this line: keysToDelete+= ","+$(this).attr("id") and then add if (keysToDelete.length > 0) keysToDelete = keysToDelete.substr(1); after the end of the each function.

Collectives™ on Stack Overflow

Jquery select multiple checkboxes

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related