In jQuery how do I select an element by its name attribute

Question

I have 3 radio buttons in my web page  like below      x000D    x000D    lt label for  theme-grey  gt  x000D      lt input type  radio  id  theme-grey  name  theme  value  grey    gt Grey lt  label gt  x000D    lt label for  theme-pink  gt  x000D      lt input type  radio  id  theme-pink  name  theme  value  pink    gt Pink lt  label gt  x000D    lt label for  theme-green  gt  x000D      lt input type  radio  id  theme-green  name  theme  value  green    gt Green lt  label gt  x000D    x000D    x000D       In jQuery  I want to get the value of the selected radio button when any of these three are clicked  In jQuery we have id     and class     selectors  but what if I want to find a radio button by its name  as below         lt radiobutton name attribute gt    click function            Please tell me how to solve this problem

User · Answer

I found this question as I was researching an error after I upgraded from 1.7.2 of jQuery to 1.8.2. I'm adding my answer because there has been a change in jQuery 1.8 and higher that changes how this question is answered now.

With jQuery 1.8 they have deprecated the pseudo-selectors like :radio, :checkbox, :text.

To do the above now just replace the :radio with [type=radio].

So your answer now becomes for all versions of jQuery 1.8 and above:

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
});

You can read about the change on the 1.8 readme and the ticket specific for this change as well as a understand why on the :radio selector page under the Additional Information section.

User · Answer

another way     input radio name theme    filter   checked   val

User · Answer

Something like this maybe      input radio name theme    click function                  When you click on any radio button  I believe it will end up selected  so this is going to be called for the selected radio button

User · Answer

You might notice using class selector to get value of ASP NET RadioButton controls is always empty and here is the reason   You create RadioButton control in ASP NET as below    lt asp RadioButton runat  server  ID  rbSingle  GroupName  Type  CssClass  radios  Text  Single    gt   lt asp RadioButton runat  server  ID  rbDouble  GroupName  Type  CssClass  radios  Text  Double    gt   lt asp RadioButton runat  server  ID  rbTriple  GroupName  Type  CssClass  radios  Text  Triple    gt    And ASP NET renders following HTML for your RadioButton   lt span class  radios  gt  lt input id  Content rbSingle  type  radio  name  ctl00 Content Type  value  rbSingle    gt  lt label for  Content rbSingle  gt Single lt  label gt  lt  span gt   lt span class  radios  gt  lt input id  Content rbDouble  type  radio  name  ctl00 Content Type  value  rbDouble    gt  lt label for  Content rbDouble  gt Double lt  label gt  lt  span gt   lt span class  radios  gt  lt input id  Content rbTriple  type  radio  name  ctl00 Content Type  value  rbTriple    gt  lt label for  Content rbTriple  gt Triple lt  label gt  lt  span gt    For ASP NET we don t want to use RadioButton control name or id because they can change for any reason out of user s hand  change in container name  form name  usercontrol name       as you can see in code above   The only remaining feasible way to get the value of the RadioButton using jQuery is using css class as mentioned in this answer to a totally unrelated question as following     span radios input radio   click function         var value     this  val

User · Answer

lt input type  radio  name  ans3  value  help  gt    lt input type  radio  name  ans3  value  help1  gt   lt input type  radio  name  ans3  value  help2  gt    lt input type  radio  name  ans2  value  test  gt    lt input type  radio  name  ans2  value  test1  gt   lt input type  radio  name  ans2  value  test2  gt    lt script type  text javascript  gt    var ans3   jq  input name  ans3   checked   val     var ans2   jq  input name  ans2   checked   val    lt  script gt

User · Answer

If you d like to know the value of the default selected radio button before a click event  try this   alert    input radio checked   val

User · Answer

input radio name theme    bind     click     function          this  val

User · Answer

To determine which radio button is checked  try this      input radio name theme    click function       var val      input radio name theme  checked   val          The event will be caught for all of the radio buttons in the group and the value of the selected button will be placed in val   Update  After posting I decided that Paolo s answer above is better  since it uses one less DOM traversal  I am letting this answer stand since it shows how to get the selected element in a way that is cross-browser compatible

User · Answer

This works great for me  For example you have two radio buttons with the same  name   and you just wanted to get the value of the checked one  You may try this one    valueOfTheCheckedRadio       name radioName  checked   val

User · Answer

can also use a CSS class to define the range of radio buttons and then use the following to determine the value      radio check checked   val

User · Answer

This worked for me    HTML    lt input type  radio  class  radioClass  name  radioName  value  1    gt Test lt br  gt   lt input type  radio  class  radioClass  name  radioName  value  2    gt Practice lt br  gt   lt input type  radio  class  radioClass  name  radioName  value  3    gt Both lt br  gt    Jquery             radioClass   each function             if   this  is   checked            alert   this  val                Hope it helps

User · Answer

If you want a true false value  use this        input radio name theme    is   checked

User · Answer

I you have more than one group of radio buttons on the same page you can also try this to get the value of radio button      input radio type radio    click function         var value     this  val        alert value         Cheers

User · Answer

This should do it  all of this is in the documentation  which has a very similar example to this      input type  radio   name  theme     click function         var value     this  val          I should also note you have multiple identical IDs in that snippet  This is invalid HTML  Use classes to group set of elements  not IDs  as they should be unique

User · Answer

The following code is used to get the selected radio button value by name   jQuery  input radio name theme  checked   val      Thanks Adnan

User · Answer

You can use filter function if you have more than one radio group on the page  as below     input type radio    change function        var value     this  filter   checked    val        alert value         Here is fiddle url  http   jsfiddle net h6ye7 67

User · Answer

For anyone who doesn t want to include a library to do something really simple   document querySelector   name  theme   checked   value    jsfiddle  For a performance overview of the current answers check here

User · Answer

input radio name theme  checked   val

[javascript] In jQuery, how do I select an element by its name attribute?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to radio-button

Examples related to jquery-selectbox