getting the names of elements in JS/jQuery

Question

I have some checkbox inputs like so:

<input type="checkbox" name="1" class="filter"/>
<input type="checkbox" name="2" class="filter"/>
...etc...

I'm trying to write a function where any time a checkbox is selected, it generates a string with all the names concatenated. Here's what I have so far:

$('.filter').click(function(event){
    var filters = $('.filter').toArray();
    var fstr = "";
    for (f in filters)
    {
        fstr = fstr+","+f.name;
    }
    alert(fstr);
});

The names keep coming up as 'undefined', though (i.e. the alert returns ,undefined,undefined,undefined,undefined,undefined,undefined). How do I access the names?

Matt Ball · Accepted Answer · 2010-05-18 17:47:45Z

4

Here's how it's meant to be done:

$('.filter').click(function (event)
{
    var fstr = '';
    $('.filter[name]').each(function ()
    {
        fstr += ',' + $(this).attr('name');
    });
    alert(fstr);
});

answered May 18, 2010 at 17:47

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

2 Comments

Mala Over a year ago

Thank you! I was trying to figure out the proper jquery syntax, and what's more this one actually works :)

Matt Ball Over a year ago

There is no .name() method, you have to get the name like any other attribute, using .attr(). You may have seen .val() used, but that is a special function primarily for getting the logical value of form elements.

Nick Craver · Accepted Answer · 2010-05-18 17:47:50Z

1

You can use .map() to get what you're after, like this:

$('.filter').click(function(event){
  var names = $('.filter').map(function () { 
    return $(this).attr("name"); 
  }).get().join(',');
  alert(names);
});

Just change $('.filter') to $('.filter:checked') if you want a list containing only the checked ones.

answered May 18, 2010 at 17:47

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Comments

Matt · Accepted Answer · 2010-05-18 17:49:49Z

1

$('.filter').click(function(event){
    var filters = $('.filter').toArray();
    var fstr = "";
    for (f in filters)
    {
        fstr = fstr+","+filters[f].name;
    }
    alert(fstr);
});

Why are you doing it that way anyway?

$('.filter').click(function(event){
    var str = '';

    $('.filter').each(function () {
       str += $(this).attr('name') +",";
    });

    alert(str);
});

answered May 18, 2010 at 17:49

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Comments

Pablo Cabrera · Accepted Answer · 2010-05-18 18:46:13Z

1

(function($filters) {
    $filters.click(function(event) {
        var filters = $filters.toArray();
        var fstr = [];
        for (var i = filters.length - 1; i > -1; --i) {
            fstr.push(filters[i].name);
        }
        fstr = fstr.join(",");
        alert(fstr);
    }
})($('.filter'));

edited May 18, 2010 at 18:46

answered May 18, 2010 at 18:37

Pablo Cabrera

5,8475 gold badges26 silver badges28 bronze badges

Comments

Millions · Accepted Answer · 2010-05-18 17:44:45Z

0

Try $(f).name.

answered May 18, 2010 at 17:44

Millions

3001 gold badge2 silver badges9 bronze badges

Comments

Jeriko · Accepted Answer · 2010-05-18 17:44:48Z

0

How about $(elem).attr("name")?

answered May 18, 2010 at 17:44

Jeriko

6,6474 gold badges30 silver badges40 bronze badges

2 Comments

Jeriko Over a year ago

By elem i mean any element. So in this case you'd use $(f)... - still undefined?

Matt Over a year ago

He's using for in, f is simply the property's key, not value.

aepheus · Accepted Answer · 2010-05-18 17:49:17Z

0

I'm thinking the convert to array is your problem, try:

var filters = $('.filter');
for(var nI = 0; nI < filters.length; nI++)
filters.eq(nI).attr('name');

answered May 18, 2010 at 17:49

aepheus

8,2178 gold badges39 silver badges52 bronze badges

Collectives™ on Stack Overflow

getting the names of elements in JS/jQuery

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related