9 February 2011

This tutorial shows you how to get values of checkbox array using jQuery. You can use this to send selected checkboxes values with ajax or add those to url variable(like in this example). If you generate a table then you can use checkboxes which values are ids of the rows. Add selected values to url for an example.

I have checkboxes with this code, rest of the html doesn't have to do anything with this tutorial so I leave it out.
Source code viewer
  1. <input type="checkbox" name="cid[]" value="<?= $row['id'] ?>" CHECKED />
Programming Language: HTML
This function allows you to get all of checked checkboxes values. Puts them in string, values are separated with commas and the string is returned.
Source code viewer
  1. <script type="text/javascript">
  2. 	$().ready(function() {
  3. 		jQuery.checked_rows = function() {
  4. 			var ids = '';
  5. 			$.each($("input[name='cid[]']:checked"), function() {
  6. 				ids += (ids?',':'') + $(this).attr('value');
  7. 			});
  8. 			return ids;
  9. 		};
  10. 	});
  11. </script>
Programming Language: Javascript
This is is the way you can use this function. You can put values in link as variable and catch it with get. You can also send the values through ajax, but in that case you can send form fields as well, so I see no point in that unless you have lot of data. If you send strings like this then you might have to escape the characters.
Source code viewer
  1. <a href="javascript:window.location.href='?ids='+$.checked_rows()"></a>
Programming Language: HTML