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

I have 3 radio buttons in my web page, like below:

_x000D_
_x000D_
<label for="theme-grey">_x000D_
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>_x000D_
<label for="theme-pink">_x000D_
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>_x000D_
<label for="theme-green">_x000D_
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>
_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?

$("<radiobutton name attribute>").click(function(){});

Please tell me how to solve this problem.

This question is related to javascript jquery html radio-button jquery-selectbox

The answer is


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.


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

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:

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

And ASP.NET renders following HTML for your RadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

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();
});

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

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.


another way

$('input:radio[name=theme]').filter(":checked").val()

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.


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


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()

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!


If you want a true/false value, use this:

  $("input:radio[name=theme]").is(":checked")

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/


$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

The following code is used to get the selected radio button value by name

jQuery("input:radio[name=theme]:checked").val();

Thanks Adnan


<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

This worked for me..

HTML:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

Jquery:


    $(".radioClass").each(function() {
        if($(this).is(':checked'))
        alert($(this).val());
    });

Hope it helps..


$('input:radio[name=theme]:checked').val();

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to radio-button

Angular 4 default radio button checked by default Angular2 - Radio Button Binding Detect if a Form Control option button is selected in VBA How to create radio buttons and checkbox in swift (iOS)? How to check if a radiobutton is checked in a radiogroup in Android? Radio Buttons ng-checked with ng-model Multiple radio button groups in MVC 4 Razor Show div when radio button selected Check a radio button with javascript Bootstrap radio button "checked" flag

Examples related to jquery-selectbox

How to check whether a select box is empty using JQuery/Javascript jQuery Set Select Index jQuery Set Selected Option Using Next Hide options in a select list using jQuery jQuery to retrieve and set selected option value of html select element Counting the number of option tags in a select tag in jQuery How can I select an element by name with jQuery? jQuery add blank option to top of list and make selected to existing dropdown jQuery: Selecting by class and input type Selecting option by text content with jQuery