Get multiple attributes with .attr() to get both "id" and ":checked" from element using "this" | jQuery

Question

my question is very simple and doesn't seem to be around as often as setting or applying value in multiple cases.

Using $(this) how can I achieve to get multiple attributes from a single element using as the title informs simply .attr().

$(this).attr('id', "checked") // Pseudo code

For the use to be stored in an array or variable for example. Thank you.

[http://stackoverflow.com/a/14645827/3877877](http://stackoverflow.com/a/14645827/3877877) ... this could help you. if not, the answer from `aruna` is what you are looking for :) — Martin E, Jan 06 '17 at 00:04

Aruna · Accepted Answer · 2017-01-06T08:07:40.310

1

The syntax you used will set the value to the attribute. Hence, you can use
something like ['id', 'checked'].map(a => $el.attr(a)) as mentioned by lxe in the comment or you can create a jQuery wrapper attrs as below.

To get the value of checked property, you can use prop as below instead of attr.

Working snippet:

$(document).ready(function() {
  $.fn.attrs = function() {
    return Object.keys(arguments).map(k => $(this).prop(arguments[k]));
  };
  
  
  $('input[type="checkbox"]').click(function() {
     globalCallback($(this).attrs('id', 'checked'));
  });
});

function globalCallback(attrs) {
  console.log(attrs);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click the checkbox and see the console:
<br/>
<input type="checkbox" id="checkbox1" /> Checkbox 1
<input type="checkbox" id="checkbox2" /> Checkbox 2
<input type="checkbox" id="checkbox3" /> Checkbox 3

edited Jan 06 '17 at 08:07

answered Jan 05 '17 at 23:37

Aruna

11,959
3
28
42

Where you've got `$('input[type="checkbox"]')` is it possible at all to make this get attributes of a single element using possibly `this` compared to all checkbox elements? Thank you for your comment. – UndefinedUsername Jan 06 '17 at 02:04
Yes, you can do. I just provided the above as a sample to loop all the checkboxes and inside the loop I have used `$(this)`. You can tell me which event you want to get the attributes or provide your html and I will update the answer accordingly. – Aruna Jan 06 '17 at 02:07
I mean inside the `each` I have used `$(this)` as `$(this).attrs('id', 'checked')` where `attrs` is a jQuery custom wrapper. – Aruna Jan 06 '17 at 02:09
Thank you for the help. If I could ask you to once the radio/tick box is check, `this` gets and sends the id and checked true or false status to console like in your above example please. – UndefinedUsername Jan 06 '17 at 02:39
Possibly without a button. Eg. Once the tick/radio box is ticked is the `.click` and not a button. Thank you. – UndefinedUsername Jan 06 '17 at 02:43
You can click the checkbox and check the console and click the same checkbox again and check :-) – Aruna Jan 06 '17 at 02:44
If you want this only for specific checkboxes, you can add a css class (like `testCss`) to them and use like this `$('input[type="checkbox"].testCss').click` – Aruna Jan 06 '17 at 02:46
Thank you so much for the help and the example. – UndefinedUsername Jan 06 '17 at 03:04
@Aruua Using your method above, how could you go about returning the variable value out to the global scope for example? – UndefinedUsername Jan 06 '17 at 07:11
You can have a global method and call the method inside the click event by passing the attribute values as parameter. – Aruna Jan 06 '17 at 07:13
Sorry to ask so much of you, but could I have an example of bringing the returning value out to the global scope please? – UndefinedUsername Jan 06 '17 at 08:05
I have updated the answer and you can check the function `globalCallback` in global scope being called. – Aruna Jan 06 '17 at 08:08

score 0 · Answer 2 · answered Jan 05 '17 at 23:21

You can't do this, according to jQuery documentation:

Get the value of an attribute for the first element in the set of matched elements.

Moreover your $(this).attr('id', "checked") code will set to the id attribute the checked value, since attr can be used to set values with exactly such syntax.

However you can create a helper methods like the one mentioned by lxe

score 0 · Answer 3 · answered Jan 05 '17 at 23:32

You can get the attributes using Array#reduce on the Element.attributes to create an object of attributes:

// get all elements attributes, and convert them to array
var attributes = [].slice.call($('#v-box').get(0).attributes, 0);

// reduce the array to key value pairs
var object = attributes.reduce(function(r, attr) {
  r[attr.name] = attr.value;
  return r;
}, {});

console.log(object);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="v-box" type="checkbox" checked="checked">

score 0 · Answer 4 · answered Jan 06 '17 at 00:56

You can easily extend the jQuery function to accommodate what your looking for. If you aren't interested in extending you could create a new function/ plugin as well

Here's an example:

(function($)
{
  var oldAttr = $.fn.attr;
  $.fn.attr = function() {
    var args= arguments[0];
    if(Object.prototype.toString.call(args)=="[object Array]") {
      return [args.map((e=> oldAttr.apply(this, [e])))];
      //if you want to get a string you could just try `return args.map((e=> oldAttr.apply(this, [e])))`
    }
    return oldAttr.apply(this, arguments);
  };
})(jQuery);

Demo: https://jsfiddle.net/eztukwj9/

Get multiple attributes with .attr() to get both "id" and ":checked" from element using "this" | jQuery

4 Answers4