How can I know which radio button is selected via jQuery

Question

I have two radio buttons and want to post the value of the selected one  How can I get the value with jQuery   I can get all of them like this      form  radio     How do I know which one is selected

User · Answer

I use this simple script     input name  myRadio     on  change   function       var radioValue      input name  myRadio   checked   val              alert radioValue

User · Answer

JQuery to get all the radio buttons in the form and the checked value     each    input type  radio     filter   checked    function        console log  Name     this name     console log  Value       this  val

User · Answer

If you have Multiple radio buttons in single form then   var myRadio1      input name radioButtonName1     var value1   myRadio1 filter   checked   val     var myRadio2      input name radioButtonName2     var value2   myRadio2 filter   checked   val      This is working for me

User · Answer

I wrote a jQuery plugin for setting and getting radio-button values  It also respects the  change  event on them    function            function changeRadioButton element  value            var name     element  attr  name                type radio  name     name      checked   removeAttr  checked                type radio  name     name      value     value        attr  checked    checked                type radio  name     name      checked   change               function getRadioButton element            var name     element  attr  name            return     type radio  name     name      checked   attr  value               var originalVal     fn val        fn val   function value               is it a radio button  treat it differently          if   this  is   type radio                    if  typeof value     undefined                        setter                 changeRadioButton this  value                   return   this                  else                      getter                 return getRadioButton this                             else                  it wasn t a radio button - let s call the default val function              if  typeof value     undefined                     return originalVal call this  value                 else                   return originalVal call this                                      jQuery     Put the code anywhere to enable the addin  Then enjoy  It just overrides the default val function without breaking anything   You can visit this jsFiddle to try it in action  and see how it works   Fiddle

User · Answer

From this question  I came up with an alternate way to access the currently selected input when you re within a click event for its respective label  The reason why is because the newly selected input isn t updated until after its label s click event   TL DR     label   click function       var selected             this  attr  for    val                  x000D   x000D    function     x000D       this outright does not work properly as explained above x000D        reported label   click function     x000D      var query      input name  filter   checked   val    x000D      var time    new Date    toString    x000D   x000D          query data-method  click event     html query     at     time   x000D        x000D   x000D       this works  but fails to update when same label is clicked consecutively x000D        reported input name  filter     on  change   function     x000D      var query      input name  filter   checked   val    x000D      var time    new Date    toString    x000D   x000D          query data-method  change event     html query     at     time   x000D        x000D   x000D       here is the solution I came up with x000D        reported label   click function     x000D      var query             this  attr  for    val    x000D      var time    new Date    toString    x000D   x000D          query data-method  click event with this     html query     at     time   x000D        x000D      x000D  input name  filter     x000D    display  none  x000D    x000D   reported label   x000D    background-color   ccc  x000D    padding  5px  x000D    margin  5px  x000D    border-radius  5px  x000D    cursor  pointer  x000D    x000D   query   x000D    padding  5px  x000D    margin  5px  x000D    x000D   query before   x000D    content   on   attr data-method       x000D    x000D   data-method  click event     x000D    color  red  x000D    x000D   data-method  change event     x000D    color   cc0  x000D    x000D   data-method  click event with this     x000D    color  green  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form id  reported  gt  x000D     lt input type  radio  name  filter  id  question  value  questions  checked  checked  gt  x000D     lt label for  question  gt Questions lt  label gt  x000D   x000D     lt input type  radio  name  filter  id  answer  value  answers  gt  x000D     lt label for  answer  gt Answers lt  label gt  x000D   x000D     lt input type  radio  name  filter  id  comment  value  comments  gt  x000D     lt label for  comment  gt Comments lt  label gt  x000D   x000D     lt input type  radio  name  filter  id  user  value  users  gt  x000D     lt label for  user  gt Users lt  label gt  x000D   x000D     lt input type  radio  name  filter  id  company  value  companies  gt  x000D     lt label for  company  gt Companies lt  label gt  x000D   x000D     lt div class  query  data-method  click event  gt  lt  div gt  x000D     lt div class  query  data-method  change event  gt  lt  div gt  x000D     lt div class  query  data-method  click event with this  gt  lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

DEMO   https   jsfiddle net ipsjolly xygr065w    x000D   x000D     function    x000D           submit   click function          x000D           alert    input radio checked   val     x000D           x000D        x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt table gt  x000D          lt tr gt  x000D            lt td gt Sales Promotion lt  td gt  x000D            lt td gt  lt input type  radio  name  q12 3  value  1  gt 1 lt  td gt  x000D            lt td gt  lt input type  radio  name  q12 3  value  2  gt 2 lt  td gt  x000D            lt td gt  lt input type  radio  name  q12 3  value  3  gt 3 lt  td gt  x000D            lt td gt  lt input type  radio  name  q12 3  value  4  gt 4 lt  td gt  x000D            lt td gt  lt input type  radio  name  q12 3  value  5  gt 5 lt  td gt  x000D         lt  tr gt  x000D       lt  table gt  x000D   lt button id  submit  gt submit lt  button gt  x000D   x000D   x000D

User · Answer

Another way to get it    x000D   x000D       myForm input type radio    on  change  function    x000D     if this checked    x000D      alert this value   x000D        x000D        x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form id  myForm  gt  x000D      lt span gt  lt input type  radio  name  q12 3  value  1  gt 1 lt  span gt  lt br gt  x000D      lt span gt  lt input type  radio  name  q12 3  value  2  gt 2 lt  span gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

To get the value of the selected radioName item of a form with id myForm      input name radioName  checked     myForm   val     Here s an example    x000D   x000D      myForm input   on  change   function     x000D     alert    input name radioName  checked     myForm   val      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form id  myForm  gt  x000D     lt input type  radio  name  radioName  value  1    gt  1  lt br   gt  x000D     lt input type  radio  name  radioName  value  2    gt  2  lt br   gt  x000D     lt input type  radio  name  radioName  value  3    gt  3  lt br   gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

You can call Function onChange       lt input type  radio  name  radioName  value  1  onchange  radio changed   this  val       gt  1  lt br   gt     lt input type  radio  name  radioName  value  2  onchange  radio changed   this  val        gt  2  lt br   gt     lt input type  radio  name  radioName  value  3   onchange  radio changed   this  val       gt  3  lt br   gt    lt script gt  function radio changed val       alert val      lt  script gt

User · Answer

If you already have a reference to a radio button group  for example   var myRadio      input name myRadio       Use the filter   function  not find     find   is for locating child descendant elements  whereas filter   searches top-level elements in your selection    var checkedValue   myRadio filter   checked   val        Notes  This answer was originally correcting another answer that recommended using find    which seems to have since been changed  find   could still be useful for the situation where you already had a reference to a container element  but not to the radio buttons  e g    var form       mainForm        var checkedValue   form find  input name myRadio  checked   val

User · Answer

This solution does not require jQuery  const RADIO NAME    quot radioName quot   const radios   Array from document getElementsByName RADIO NAME    const checkedRadio   radios filter e  gt e checked    This uses jQuery  const radios   Array from     name   RADIO NAME      const checkedRadio   radios filter e  gt e checked    jQuery adds an extra layer of abstraction that isn t needed here  You could also use  const radios   Array from document querySelectorAll   name   RADIO NAME      const checkedRadio   radios filter e  gt e checked  0    But getElementsByName is simple and clear enough

User · Answer

To retrieve all radio buttons values in JavaScript array use following jQuery code    var values   jQuery  input checkbox checked group1   map function          return this value     get

User · Answer

If you only have 1 set of radio buttons on 1 form  the jQuery code is as simple as this       input checked    val

User · Answer

Use this          myform input type  radio   checked   val

User · Answer

I ve released a library to help with this   Pulls all possible input values  actually  but also includes which radio button was checked   You can check it out at https   github com mazondo formalizedata  It ll give you a js object of the answers  so a form like    lt form gt   lt input type  radio  name favorite-color  value  blue  checked gt  Blue  lt input type  radio  name  favorite-color  value  red  gt  Red  lt  form gt    will give you      form   formalizeData        favorite-color     blue

User · Answer

If you want just the boolean value  i e  if it s checked or not try this       Myradio   is   checked

User · Answer

try it-  var radioVal       myform   find  input type  radio   checked   val     console log radioVal

User · Answer

You can use the  checked selector along with the radio selector       form radio checked   val

User · Answer

To get the value of the selected radio that uses a class       class checked   val

User · Answer

try this one  it worked for me    input type  quot radio quot   name  quot name quot   checked   val

User · Answer

This works fine     input type  radio   class  className   checked   val     Working Demo  The  checked selector works for checkboxes  radio buttons  and select elements  For select elements only  use the  selected selector   API for  checked Selector

User · Answer

How about this   Using change and get the value of radio type is checked      x000D   x000D      my-radio-form   on  change   function     x000D    console log     type  radio   checked   val     x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 0 0 jquery min js  gt  lt  script gt  x000D   lt form id  my-radio-form  gt  x000D     lt input type  radio  name  input-radio  value  a    gt a x000D     lt input type  radio  name  input-radio  value  b    gt b x000D     lt input type  radio  name  input-radio  value  c    gt c x000D     lt input type  radio  name  input-radio  value  d    gt d x000D   lt  form gt  x000D   x000D   x000D

User · Answer

input radio checked   val

User · Answer

What I needed to do was simplify C  code  that is do as much as possible in the front end JavaScript   I m using a fieldset container because I m working in DNN and it has its own form   So I can t add a form   I need to test which text box out of 3 is being used and if it is  what s the type of search  Starts with the value  Contains the value  Exact Match of the value   HTML    lt fieldset id  fsPartNum  class  form-inline  gt   lt div class  form-group  gt       lt label for  txtPartNumber  gt Part Number  lt  label gt       lt input type  text  id  txtPartNumber  class  input-margin-pn    gt   lt  div gt   lt div class  form-group  gt       lt label for  radPNStartsWith  gt Starts With   lt  label gt       lt input type  radio  id  radPNStartsWith  name  partNumber  checked  value  StartsWith   gt   lt  div gt   lt div class  form-group  gt       lt label for  radPNContains  gt Contains   lt  label gt       lt input type  radio  id  radPNContains  name  partNumber  value  Contains    gt   lt  div gt   lt div class  form-group  gt       lt label for  radPNExactMatch  gt Exact Match   lt  label gt       lt input type  radio  id  radPNExactMatch  name  partNumber  value  ExactMatch    gt   lt  div gt      And my JavaScript is           alert    input name partNumber  checked     fsPartNum   val          if txtPartNumber val                    message    Customer Part Number             else if txtCommercialPartNumber val                       else if txtDescription val                     Just saying any containing tag with an ID can be used   For DNNers  this is good to know   The end goal here is pass to the mid-level code what is needed to start a parts search in SQL Server   This way I don t have to copy the much more complicated previous C  code also   The heavy lifting is being done right here   I had to look a bit for this and then tinker with it to get it to work   So for other DNNers  hopefully this is easy to find

User · Answer

Another option is      input name radioName  checked   val

User · Answer

You need access with the  checked selector   Check this doc         https   api jquery com checked-selector       a example    x000D   x000D     input name radioName  checked     myForm   val   x000D      myForm input   on  change   function     x000D       val   text    input name radioName  checked     myForm   val     x000D      x000D   val   x000D    color   EB0054  x000D    font-size  1 5em  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt h3 gt Radio value   lt span id  val  gt  lt span gt  lt  h3 gt  x000D   lt form id  myForm  gt  x000D     lt input type  radio  name  radioName  value  a  gt  a  lt br gt  x000D     lt input type  radio  name  radioName  value  b  gt  b  lt br gt  x000D     lt input type  radio  name  radioName  value  c  gt  c  lt br gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

In a JSF generated radio button  using  lt h selectOneRadio gt  tag   you can do this   radiobuttonvalue   jQuery  input name  form id  radiobutton id   checked   val      where selectOneRadio ID is radiobutton id and form ID is form id   Be sure to use name instead id  as indicated  because jQuery uses this attribute  name is generated automatically by JSF resembling control ID

User · Answer

function         Someone has clicked one of the radio buttons var myform   form myform     myform  click function          var radValue            this  find  input type radio  checked   each function              radValue    this  val

User · Answer

Here s how I would write the form and handle the getting of the checked radio   Using a form called myForm    lt form id  myForm  gt       lt input type  radio  name  radio1  class  radio1  value  val1    gt       lt input type  radio  name  radio1  class  radio1  value  val2    gt           lt  form gt    Get the value from the form       myForm  radio1 checked   val      If you re not posting the form  I would simplify it further by using    lt input type  radio  class  radio1  value  val1    gt   lt input type  radio  class  radio1  value  val2    gt    Then getting the checked value becomes           radio1 checked   val      Having a class name on the input allows me to easily style the inputs

User · Answer

Use this   value      input name button-name  checked   val

User · Answer

Get all radios   var radios   jQuery  input type  radio        Filter to get the one thats checked  radios filter   checked

User · Answer

jQuery plugin for setting and getting radio-button values  It also respects the  change  event on them     lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt       lt form id  toggle-form  gt         lt div id  radio  gt           lt input type  radio  id  radio1  name  radio  checked  checked    gt  lt label for  radio1  gt Plot single lt  label gt           lt input type  radio  id  radio2  name  radio   gt  lt label for  radio2  gt Plot all lt  label gt         lt  div gt       lt  form gt       lt script type  text javascript  gt         document   ready function            Get all radios       var radios   jQuery  input type  radio           checked radios radios filter   checked    for i 0 i lt checked radios length i         console log checked radios i                    lt  script gt    or another way   lt script type  text javascript  gt     document   ready function         Get all radios    checked radios jQuery  input name radio  checked   val     for i 0 i lt checked radios length i         console log checked radios i            lt  script gt

User · Answer

Also  check if the user does not select anything   var radioanswer    none   if     input name myRadio  checked   val      null                  radioanswer      input name myRadio  checked   val

User · Answer

This should work       input name  radioName   checked   val     Note the    usaged around the input checked and not    like the Peter J s solution

User · Answer

Try  myForm myOption value    x000D   x000D  function check     x000D    console log  myForm myOption value    x000D    x000D   lt form id  myForm  gt  x000D     lt input type  radio  name  myOption  value  1  gt  1  lt br gt  x000D     lt input type  radio  name  myOption  value  2  gt  2  lt br gt  x000D     lt input type  radio  name  myOption  value  3  gt  3  lt br gt  x000D   lt  form gt  x000D   lt button onclick  check    gt check lt  button gt  x000D   x000D   x000D

User · Answer

In my case I have two radio buttons in one form and I wanted to know the status of each button  This below worked for me    x000D   x000D     get radio buttons value x000D  console log   radio1          input id radio1  checked     toggle-form   val      x000D  console log   radio2          input id radio2  checked     toggle-form   val      x000D   x000D   x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form id  toggle-form  gt  x000D     lt div id  radio  gt  x000D       lt input type  radio  id  radio1  name  radio  checked  checked    gt  lt label for  radio1  gt Plot single lt  label gt  x000D       lt input type  radio  id  radio2  name  radio   gt  lt label for  radio2  gt Plot all lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Please try below example to check which radio button in selected       lt script gt          form1 input   on  change   function            alert    input name age  checked     form1    val               lt  script gt    lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt       lt form id  form1  gt         lt input type  radio  name  age  value  18    gt  18  lt br   gt         lt input type  radio  name  age  value  20    gt  20  lt br   gt         lt input type  radio  name  age  value  22    gt  22  lt br   gt       lt  form gt

User · Answer

Stat   click function           var rdbVal1      input name  S  checked   val

User · Answer

Along with the CSS selector  checked  you can also use the prop function  as of jQuery 1 6   I can t remember what project I was working on where simply using     something   is   checked   only worked sometimes  and I resorted to also using     something   prop  checked   worked when it failed  but it led me to using both   In my code snippet below  I ve written two helper functions  is checked and get group value  The function is checked returns a boolean true false value  true if the input passed in the parameter is checked  also checks with the prop   function  or false if it s not checked  The function get group value takes the name of the radio inputs and returns the value of the one that is checked  or an empty string if none are checked  These helper functions will also work with checkboxes  not just radio buttons   Since the question did not define when they re retrieving the value s   I ve written a few listeners for four  3  different scenarios  when interacting with any radio button  when submitting the form  and when clicking one of these hard-coded buttons to do a one-time retrieval of the value of the group   Please note that I m using  click  to identify when the user interacts with the radio input element because  change  will never get triggered since the  value  attribute doesn t get changed when it s checked or not  I use this for checkboxes as well as radio buttons    x000D   x000D  function is checked input    x000D    var  input     input   x000D    return  input is   checked       input prop  checked      Returns a boolean value  True if checked  false if not  x000D    x000D  function get group value group name    x000D    var  inputs       name      group name       checked    x000D    if   inputs length    return  inputs first   val        If it exists  return the value of the first one found x000D    return       If it doesn t exist  return nothing x000D    x000D     form   on  submit   function e    x000D    e preventDefault    x000D    var  form     this   results       x000D     form find  input type radio    each function     x000D      var  input     this   x000D      if  is checked this     x000D        results  input attr  name       input val    x000D        x000D        x000D    console info  Form Results   results   x000D      x000D     form input type radio    on  click   function e    x000D    var group name     this  attr  name    x000D    console info  Radio Button Click   group name  get group value group name    x000D      x000D     button radio-button   on  click   function e    x000D    var group name     this  attr  id    x000D    console info  Button Click   group name  get group value group name    x000D      x000D   my-test   x000D    background   ffffff  x000D    color   000000  x000D    padding  16px  x000D    x000D   x000D  form   x000D    padding  8px  x000D    border  1px solid  999999  x000D    x000D   x000D  fieldset   x000D    border  none  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div class  my-test  gt  x000D     lt form gt  x000D      Group 1 x000D       lt fieldset gt  x000D         lt label gt  lt input type  radio  name  example-1  value  Foo  required   gt Foo lt  label gt  x000D         lt label gt  lt input type  radio  name  example-1  value  Bar  required   gt Bar lt  label gt  x000D       lt  fieldset gt  x000D      Group 2 x000D       lt fieldset gt  x000D         lt label gt  lt input type  radio  name  example-2  value  Banana  required   gt Banana lt  label gt  x000D         lt label gt  lt input type  radio  name  example-2  value  Apple  required   gt Apple lt  label gt  x000D       lt  fieldset gt  x000D       lt button type  submit  gt Submit lt  button gt  x000D     lt  form gt  x000D     lt p gt Press this button to just get the value of the first group   lt button class  radio-button  id  example-1  gt Foo or Bar  lt  button gt  lt  p gt  x000D     lt p gt Press this button to just get the value of the second group   lt button class  radio-button  id  example-2  gt Banana or Apple  lt  button gt  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

[javascript] How can I know which radio button is selected via jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to jquery-selectors

Examples related to radio-button