Html table, where each row has a checkbox, want to send all checkbox value's to an ajax call

Question

I have a report page, that displays many rows, each row having its own checkbox with its value being an ID field from the database.

This is for a bulk operation, that will be preformed on all the row's where the checkbox was checked.

So if the user checks multiple boxes, hits a button, I need to send all the checkbox values to a controller's action that will take those Id's and process them.

I am using jQuery for this.

Answer 1

Simply have all the checkbox have the same name, not id.

Like:

<input type='checkbox' name='opt' value ='1' id='opt1'/>
<input type='checkbox' name='opt' value ='2' id='opt2'/>
<input type='checkbox' name='opt' value ='3' id='opt3'/>
<input type='checkbox' name='opt' value ='4' id='opt4'/>
<input type='checkbox' name='opt' value ='5' id='opt5'/>
<input type='checkbox' name='opt' value ='6' id='opt6'/>
<input type='checkbox' name='opt' value ='7' id='opt7'/>

If I recall correctly, you'll receive a parameter like:

opt=1,2,3,4,5,6,7

accordingly the checked values.

That's written out of the top of my head, I haven't exactly tested this, though.

Answer 2

Assuming they have the same name, if not give them something else the same.

data = $('input[name=fieldname]').serialize();

You would then use data in your ajax call.

Answer 3

If you do form ajaxSubmit it will submit all the checked checkboxes. But if you want to submit it manually by serializing the values, you can select them by using jquery selector like $(input[name=chkbox]:checked) and loop through it to get all values and build the string. But it is always better to use ajaxsubmit