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

4 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
  3. Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.
    Best Devops Training in pune
    Microsoft azure training in Bangalore
    Power bi training in Chennai

    ReplyDelete