skribe skribe - 8 months ago 53
jQuery Question

How to get value and data attribute form input using jQuery .map function

I have a series of checkbox inputs with the following format.

<input type="checkbox" name="xyz" value="124" data-info="some info">

I am using jquery to select the inputs that are checked and trying to get the value and data-info using the
function and use it in an ajax request. I can get the value like this.

checked_options = $(button).parent().find('input:checkbox:checked').map(function () {
return this.value;

But I can't figure out how to get the value and the data-info and return them as an array or object.


You can use .data() method like:

checked_options = $(button).parent().find('input:checkbox:checked').map(function () {
  return this.value + ',' + $(this).data('info');


You can create an array of objects containing value and data-info like

checked_options = $(button).parent().find('input:checkbox:checked').map(function() {
  return {
    v: this.value,
    d: $(this).data('info')

console.log(checked_options); // Array of objects as result here