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

Question

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 .map() 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;
    }).get();

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

palaѕн · Accepted Answer · 2016-08-18 14:00:52Z

3

You can use .data() method like:

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

Edit:

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')
  };
}).get();

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

edited Aug 18, 2016 at 14:00

answered Aug 18, 2016 at 13:43

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

2 Comments

skribe Over a year ago

ok I was actually able to get the data using $(this).attr("data-desc") as well but I was not wanting to return them concatenated, but as an object or array. Sorry I was not clear. I edited my question.

palaѕн Over a year ago

I have updated the code. Please check your browser console if the result is in correct format.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related