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');

3 comments:

  1. its really cool.

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete