jQuery/JavaScript Selector OR || [duplicate]

Question

Possible Duplicate:
jQuery attribute selector for multiple values

I have this

$('input:radio[name=foo]').change(function() {
    blah();
});

$('input:radio[name=bar]').change(function() {
    blah();
});

Can I do something like this?

$('input:radio[name=foo||bar]').change(function() {
    blah();
});

what If I had another one?

$('input:radio[name=foo||bar||foobar]').change(function() {
    blah();
});

I can't use class which would be ideal as this is a custom framework (not mine) that generates the HTML which is overriding my class. Also there is no id selector available just the name attribute. I think I'm stuck doing separate functions but wanted to pose the question to see if anyone can think outside the box on this one.

Note: this project uses jQuery 1.3.2 and I can't upgrade just yet. And before you say anything, yeah I'm with you on upgrading...

Rory McCrossan · Accepted Answer · 2012-02-29 15:30:01Z

17

There is no 'or' character, but you can use multiple selectors - you just separate them by commas:

$('input:radio[name=foo], input:radio[name=bar]').change(function() {
    blah();
});

Or better yet, use a class selector as this is exactly what they were designed for.

answered Feb 29, 2012 at 15:30

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Phill Pafford Over a year ago

I did not know you could comma delimiter, thanks! Learned something new

Matt K Over a year ago

+1 did not know you could do that either. good answer.

zzzzBov · Accepted Answer · 2012-02-29 15:31:20Z

2

Unfortunately there isn't a simple selector for or within [attr] selectors. You can use a comma (,) to separate your selections:

$('input:radio[name=foo], input:radio[name=bar]').change(...);

Or if your selection happens to be longer, you can use $.fn.filter:

$('#foo #bar #baz .fizz .buzz input:radio').filter('[name=foo], [name=bar]').change(...);

I recommend reviewing the entire list of jQuery selectors.

answered Feb 29, 2012 at 15:31

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Comments

T.J. Crowder · Accepted Answer · 2012-02-29 15:29:32Z

1

jQuery's $() function uses CSS selectors (nearly all of CSS3 plus a few of its own). Their syntax has nothing whatsoever to do with JavaScript's logical operators.

Neither CSS3 nor jQuery offer a "match any of these", so you use a selector group instead:

$('input:radio[name=foo], input:radio[name=bar], input:radio[name=foobar]').change(function() {
    blah();
});

answered Feb 29, 2012 at 15:29

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Comments

josh.trow · Accepted Answer · 2012-02-29 15:38:02Z

1

Another alternative is adding a new filter for regex:

http://james.padolsey.com/javascript/regex-selector-for-jquery/

Then you can do something like

$('input:radio:regex(name, ^(foo|bar|baz)$)')

answered Feb 29, 2012 at 15:38

josh.trow

4,90123 silver badges31 bronze badges

Comments

Angel Marquez · Accepted Answer · 2012-02-29 15:41:26Z

1

Your proposed solution does work on newer versions of jQuery. You can chain filter onto your query, though ...

$('input:radio').filter("[name=foo],[name=bar]").change(function() {
   blah();
});

View and play with the jsfiddle here http://jsfiddle.net/NAgv5/1/

answered Feb 29, 2012 at 15:41

Angel Marquez

815 bronze badges

Collectives™ on Stack Overflow

jQuery/JavaScript Selector OR || [duplicate]

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Linked

Related