Tuesday, February 28, 2012

jQuery: Select a radio button by name and value

Using jQuery, if you want to select a specific radio button based on name and value
 $(':radio[name="radioBtnName"][value="radioValue"]');  
Example:


<div id="radioGrps">  
   <div id="setOne">  
       <input type="radio" name="orange" value="5" />  
       <input type="radio" name="orange" value="10" checked />  
       <input type="radio" name="orange" value="20" />  
   </div>  
   <div id="setTwo">  
      <input type="radio" name="peach" value="10" />  
      <input type="radio" name="peach" value="15" />  
      <input type="radio" name="peach" value="20" checked />  
  </div>  
 </div>  

In the above example, if you want to select radio button in div#setOne with value 10, then

$('#setOne :radio[name="orange"][value="10"]');  
 or  
 $(':radio[name="orange"][value="10"]');  
 //to make it checked  
 $(':radio[name="orange"][value="10"]').attr('checked', 'checked');