Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery match multiple attributes

I have the following markup, and I want to make the All radio button checked.

<ul>     <li><input type="radio" value="All" name="Foo"/>All</li>     <li><input type="radio" value="New" name="Foo"/>New</li>     <li><input type="radio" value="Removed" name="Foo"/>Removed</li>     <li><input type="radio" value="Updated" name="Foo"/>Updated</li> </ul> 

I'd like to match via attribute, but I need to match on 2 attributes, @name='Foo' and @value='All'.

Something like this:

$("input[@name='Foo' @value='all']").attr('checked','checked'); 

Can someone show how this can be done?

like image 854
zadam Avatar asked Oct 01 '08 02:10

zadam


People also ask

How to select multiple attributes in jQuery?

With jQuery, it is easy to select elements with a given attribute value. For example: var elements = $('div[attr1="value1"]');

How do you target multiple elements in jQuery?

To select multiple elements of an html page using multiple elements selector, we pass the element names inside parenthesis, in double quotes, separated by commas. For example: $(“div, p, h2”) this will select all the div, p and h2 elements of a page.

Can we use multiple selectors in jQuery?

You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.


2 Answers

The following HTML file shows how you can do this:

<html>   <head>     <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>     <script type="text/javascript">       $(document).ready(function(){         $("a").click(function(event){           $("input[name='Foo'][value='All']").attr('checked','checked');           event.preventDefault();         });       });     </script>   </head>   <body>     <ul>       <li><input type="radio"  value="All"  name="Foo"  />All</li>       <li><input type="radio"  value="New"  name="Foo"  />New</li>       <li><input type="radio"  value="Removed"  name="Foo"  />Removed</li>       <li><input type="radio"  value="Updated"  name="Foo"  />Updated</li>     </ul>     <a href="" >Click here</a>   </body> </html> 

When you click on the link, the desired radio button is selected. The important line is the one setting the checked attribute.

like image 195
paxdiablo Avatar answered Oct 12 '22 02:10

paxdiablo


I was beating my head against a wall similar to this and just want to point out that in jQuery 1.3 the syntax used in the accepted answer is the ONLY syntax that will work. The questioner uses the @ syntax for the expression which does not work at all in jQuery. Hopefully this helps the next guy to come across this question via Google =p

To be clear, you have to use

jQuery('input[name=field1][val=checked]')  

and not

jQuery('input[@name=field1][@val=checked]') 
like image 42
easel Avatar answered Oct 12 '22 02:10

easel