jQuery get value of selected radio button

Question

The problem statement is simple  I need to see if user has selected a radio button from a radio group  Every radio button in the group share same id   The problem is that I don t have control on how the form is generated  Here is the sample code of how a radio button control code looks like    lt input type  radio  name  s 2 1 6 0  value  Mail copy to my bill to address  id    InvCopyRadio  onchange    SWESubmitForm document SWEForm2 0 s 4     1-DPWJJF    style  height 20 width 25  tabindex 1997  gt    In addition to this when a radio button is selected it doesn t add a  checked  attribute to the control just text checked  I guess just the property checked without a value   Below is how a selected radio control looks like   lt input type  radio  checked name  s 2 1 6 0  value  Mail copy to my bill to address  id    InvCopyRadio  onchange    SWESubmitForm document SWEForm2 0 s 4     1-DPWJJF    style  height 20 width 25  tabindex 1997  gt    Can anybody help me with jQuery code that can help me to get the value of checked radio button

User · Answer

Here are 2 radio buttons namely rd1 and Radio1

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" />

The simplest wayt to check which radio button is checked ,by checking individual is(":checked") property

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }

User · Answer

lt input type  radio  name  s 2 1 6 0  value  Mail copy to my bill to address  id    InvCopyRadio  onchange    SWESubmitForm document SWEForm2 0 s 4     1-DPWJJF    style  height 20 width 25  tabindex 1997  gt     function               submit   click function             alert    input name s 2 1 6 0  checked   val

User · Answer

Just use      input name  name of your radiobutton   checked   val      So easy it is

User · Answer

I know that I am joining this late  But it is worth mentioning that it takes    lt label class  custom-control-label  for  myRadioBtnName  gt Personal Radio Button lt  label gt    And then I checked this in my js  It could be like     document  ready function            MyRadioBtnOuterDiv   click function        var radioValue      input name myRadioButtonNameAttr  checked   val        if radioValue      myRadioBtnName                showMyRadioArea   show         else if radioValue      yourRadioBtnName                showYourRadioArea   show

User · Answer

radioID      select the radio by its id      change function       bind a function to the change event         if    this  is   checked         check if the radio is checked             var val     this  val       retrieve the value                     Make sure to wrap this in the DOM ready function    function          or   document  ready function

User · Answer

Simplest way to get the selected radio button s value is as follows      input name  optradio   checked   val      No space should be used in between selector

User · Answer

lt div id  subscriptions  gt   Company Suscription   lt input type  radio  name  subsrad  value  1  gt   Customer Subscription  lt input type  radio  name  subsrad  value  2  gt   Manully Set  lt input type  radio  name  subsrad  value  MANUAL  gt   NO Subscription  lt input type  radio  name  subsrad  value  0  gt    lt  div gt    and handle jquery for alert as for th e value set   Changed through div id       subscriptions input      select the radio by its id      on  change   function       bind a function to the change event     alert    input name  subsrad   checked     subscriptions   val                       it is so easy     -

User · Answer

Check the example it works fine    lt div class  dtl radio  gt    Metal purity         lt label gt       lt input type  radio  name  purityradio  class  gold color  value  92  checked    gt      92      lt  label gt       lt label gt       lt input type  radio  name  purityradio  class  gold color  value  75  gt      75      lt  label gt       lt label gt       lt input type  radio  name  purityradio  class  gold color  value  58 5  gt      58 5      lt  label gt       lt label gt       lt input type  radio  name  purityradio  class  gold color  value  95  gt      95      lt  label gt       lt label gt       lt input type  radio  name  purityradio  class  gold color  value  59  gt      59      lt  label gt       lt label gt       lt input type  radio  name  purityradio  class  gold color  value  76  gt      76      lt  label gt       lt label gt       lt input type  radio  name  purityradio  class  gold color  value  93  gt      93      lt  label gt      lt  div gt       x000D   x000D  var check value       gold color checked   val    x000D   x000D   x000D

User · Answer

I am not a javascript person  but I found here for searching this problem  For who google it and find here  I am hoping that this helps some  So  as in question if we have a list of radio buttons    lt div class  list  gt       lt input type  radio  name  b1  value  1  gt       lt input type  radio  name  b2  value  2  checked  checked  gt       lt input type  radio  name  b3  value  3  gt   lt  div gt    I can find which one selected with this selector       list input type  radio   checked first   val      Even if there is no element selected  I still don t get undefined error  So  you don t have to write extra if statement before taking element s value   Here is very basic jsfiddle example

User · Answer

input name  gender   checked   val     for nested attributes     input name  lead gender    checked   val     Don t forget single braces for name

User · Answer

Try this with example   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1   jquery min js  gt  lt  script gt   lt form id  myForm  gt   lt input type  radio  name  radio  value  first   gt  1  lt br  gt   lt input type  radio  name  radio  value  second   gt  2  lt br  gt   lt  form gt      lt script gt    document  ready function              myForm   on  click   function              var value       name radio  checked   val             alert value               lt  script gt

User · Answer

HTML Markup    lt div class  quot form-group quot  gt     lt input id  quot rdMale quot  type  quot radio quot  class  quot clsGender quot  value  quot Male quot  name  quot rdGender quot    gt  Male    lt input id  quot rdFemale quot  type  quot radio quot  class  quot clsGender quot  value  quot Female quot  name  quot rdGender quot    gt  Female   lt  div gt    Get selected value by radio button Id      quot input name  rdGender   quot   click function           alert    quot  rdMale quot   val           Get value by radiobutton Classname     quot  clsGender quot   click function             alert   this  val                   or       alert    quot  clsGender checked quot   val              Get value by name       quot input name  rdGender   quot   click function                var rdVaule      quot input name  rdGender   checked quot   val              alert rdVaule

User · Answer

lt input type  radio  class  radioBtnClass  name  numbers  value  1    gt 1 lt br  gt   lt input type  radio  class  radioBtnClass  name  numbers  value  2    gt 2 lt br  gt   lt input type  radio  class  radioBtnClass  name  numbers  value  3    gt 3 lt br  gt    This will return  checked radio button value   if    input type  radio   radioBtnClass   is   checked          var card type      input type  radio   radioBtnClass checked   val        alert card type

User · Answer

In your code  jQuery just looks for the first instance of an input with name q12 3  which in this case has a value of 1  You want an input with name q12 3 that is  checked      function            submit   click function                  alert    input name q12 3  checked   val                    Note that the above code is not the same as using  is   checked    jQuery s is    function returns a boolean  true or false  and not an element

User · Answer

multi group radio button covert value to array   x000D   x000D  var arr       x000D      function r n    x000D   x000D   x000D          var section      input radio name      n       checked   val    x000D          arr n    section  x000D   x000D          console log arr  x000D        x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input type  radio  onchange  r  b1    class  radioID  name  b1  value  1  gt 1 x000D   lt input type  radio  onchange  r  b1     class  radioID  name  b1  value  2    gt 2 x000D   lt input type  radio  onchange  r  b1      class  radioID  name  b1  value  3  gt 3 x000D   x000D   lt br gt  x000D   x000D   lt input type  radio  onchange  r  b2    class  radioID2  name  b2  value  4  gt 4 x000D   lt input type  radio  onchange  r  b2     class  radioID2  name  b2  value  5    gt 5 x000D   lt input type  radio  onchange  r  b2      class  radioID2  name  b2  value  6  gt 6 x000D   x000D   x000D

User · Answer

See below for working example with a collection of radio groups each associated with different sections  Your naming scheme is important  but ideally you should try and use a consistent naming scheme for inputs anyway  especially when they re in sections like here     x000D   x000D      submit   click function    x000D    var section      input radio name  sec num   checked   val    x000D    var question      input radio name  qst num   checked   val    x000D     x000D    var selectedVal   checkVal section  question   x000D        show val div   text selectedVal   x000D        show val div   show    x000D      x000D   x000D  function checkVal section  question    x000D    var value      input radio name  sec  section   r  question     checked   val       Selection Not Made   x000D    return value  x000D    x000D      margin  0    x000D  div   margin-bottom  20px  padding  10px    x000D  h5  label   display  inline-block    x000D   small   font-size  12px    x000D   hide   display  none    x000D   formDiv   padding  10px  border  1px solid black    x000D   center   display block  margin  0 auto  text-align center    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  center  gt  x000D     lt div gt  x000D       lt h4 gt Section 1 lt  h4 gt  x000D   x000D       lt h5 gt First question text lt  h5 gt  x000D       lt label class  small  gt  lt input type  radio  name  sec1 r1  value   1 1  YES  gt  YES lt  label gt  x000D       lt label class  small  gt  lt input type  radio  name  sec1 r1  value   1 1  NO  gt  NO lt  label gt  x000D       lt br  gt  x000D       lt h5 gt Second question text lt  h5 gt  x000D       lt label class  small  gt  lt input type  radio  name  sec1 r2  value   1 2  YES  gt  YES lt  label gt  x000D       lt label class  small  gt  lt input type  radio  name  sec1 r2  value   1 2  NO  gt  NO lt  label gt  x000D       lt br  gt  x000D       lt h5 gt Third Question lt  h5 gt  x000D       lt label class  small  gt  lt input type  radio  name  sec1 r3  value   1 3  YES  gt  YES lt  label gt  x000D       lt label class  small  gt  lt input type  radio  name  sec1 r3  value   1 3  NO  gt  NO lt  label gt  x000D     lt  div gt  x000D   x000D     lt div gt  x000D       lt h4 gt Section 2 lt  h4 gt  x000D       lt h5 gt First question text lt  h5 gt  x000D       lt label class  small  gt  lt input type  radio  name  sec2 r1  value   2 1  YES  gt  YES lt  label gt  x000D       lt label class  small  gt  lt input type  radio  name  sec2 r1  value   2 1  NO  gt  NO lt  label gt  x000D       lt br  gt  x000D       lt h5 gt Second question text lt  h5 gt  x000D       lt label class  small  gt  lt input type  radio  name  sec2 r2  value   2 2  YES  gt  YES lt  label gt  x000D       lt label class  small  gt  lt input type  radio  name  sec2 r2  value   2 2  NO  gt  NO lt  label gt  x000D       lt br  gt  x000D       lt h5 gt Third Question lt  h5 gt  x000D       lt label class  small  gt  lt input type  radio  name  sec2 r3  value   2 3  YES  gt  YES lt  label gt  x000D       lt label class  small  gt  lt input type  radio  name  sec2 r3  value   2 3  NO  gt  NO lt  label gt  x000D     lt  div gt  x000D   x000D     lt div gt  x000D       lt h4 gt Section 3 lt  h4 gt  x000D       lt h5 gt First question text lt  h5 gt  x000D       lt label class  small  gt  lt input type  radio  name  sec3 r1  value   3 1  YES  gt  YES lt  label gt  x000D       lt label class  small  gt  lt input type  radio  name  sec3 r1  value   3 1  NO  gt  NO lt  label gt  x000D       lt br  gt  x000D       lt h5 gt Second question text lt  h5 gt  x000D       lt label class  small  gt  lt input type  radio  name  sec3 r2  value   3 2  YES  gt  YES lt  label gt  x000D       lt label class  small  gt  lt input type  radio  name  sec3 r2  value   3 2  NO  gt  NO lt  label gt  x000D       lt br  gt  x000D       lt h5 gt Third Question lt  h5 gt  x000D       lt label class  small  gt  lt input type  radio  name  sec3 r3  value   3 3  YES  gt  YES lt  label gt  x000D       lt label class  small  gt  lt input type  radio  name  sec3 r3  value   3 3  NO  gt  NO lt  label gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D   lt div id  formDiv  class  center  gt  x000D     lt form target   show val div  method  post  gt  x000D       lt p gt Choose Section Number lt  p gt  x000D       lt label class  small  gt  x000D         lt input type  radio  name  sec num  value  1  gt  1 lt  label gt  x000D       lt label class  small  gt  x000D         lt input type  radio  name  sec num  value  2  gt  2 lt  label gt  x000D       lt label class  small  gt  x000D         lt input type  radio  name  sec num  value  3  gt  3 lt  label gt  x000D       lt br  gt  lt br  gt  x000D       x000D       lt p gt Choose Question Number lt  p gt  x000D       lt label class  small  gt  x000D         lt input type  radio  name  qst num  value  1  gt  1 lt  label gt  x000D       lt label class  small  gt  x000D         lt input type  radio  name  qst num  value  2  gt  2 lt  label gt  x000D       lt label class  small  gt  x000D         lt input type  radio  name  qst num  value  3  gt  3 lt  label gt  x000D       lt br  gt  lt br  gt  x000D       x000D       lt input id  submit  type  submit  value  Show Value  gt  x000D       x000D     lt  form gt  x000D     lt br  gt  x000D     lt p id  show val div  gt  lt  p gt  x000D   lt  div gt  x000D   lt br  gt  lt br  gt  lt br  gt  x000D   x000D   x000D

User · Answer

You can get the value of selected radio button by Id using this in javascript jQuery        InvCopyRadio checked   val      I hope this will help

User · Answer

The best way to explain this simple topic is by giving simple example and reference link -     In the following example we have two radio buttons  If the user selects any radio button  we will display the selected radio button value in a alert box    Html    lt form id  Demo  gt   lt input type  radio  name  Gender  value  Male    gt  Male  lt br   gt   lt input type  radio  name  Gender  value  Female    gt  Female lt br   gt   lt input type  radio  name  Gender  value  others    gt  others  lt br   gt   lt  form gt    jquery -     document  ready function                Demo input   on  change   function                 alert    input name  Gender   checked     Demo   val

User · Answer

In case you don t know the sepcific name or want to check all radio inputs in a form  you can use a global var to check for each radio group the value only once             var radio name                  form  find   radio   each function                if   radio name    radio name      this  attr  name                      radio name     this  attr  name                    var val      input name    radio name     checked   val                    if   val  alert    input name    radio name     checked   val

User · Answer

First  you cannot have multiple elements with the same id   I know you said you can t control how the form is created  but   try to somehow remove all the ids from the radios  or make them unique   To get the value of the selected radio button  select it by name with the  checked filter   var selectedVal       var selected      input type  radio   name  s 2 1 6 0   checked    if  selected length  gt  0        selectedVal   selected val        EDIT  So you have no control over the names   In that case I d say put these radio buttons all inside a div  named  say  radioDiv  then slightly modify your selector   var selectedVal       var selected       radioDiv input type  radio   checked    if  selected length  gt  0        selectedVal   selected val

User · Answer

Another Easy way to understand    It s Working   HTML Code     lt input type  radio  name  active status  class  active status  value  Hold  gt Hold    lt input type  radio  name  active status  class  active status  value  Cancel  gt Cancel    lt input type  radio  name  active status  class  active status  value  Suspend  gt Suspend   Jquery Code     document  on  click     active status   function       var a      input name active status  checked   val        OR      var a       active status checked   val     alert a

User · Answer

By Name only    function             input name  EventType   radio   change function              alert    input name  EventType   checked   val

User · Answer

if       InvCopyRadio   prop  checked    amp  amp      InvCopyRadio   prop  checked           do something

User · Answer

Even input is not necessary as suggested by other answers   The following code can also be used   var variable name       name  radio name   checked   val

User · Answer

Get all radios   var radios      input type  radio        Filter to get the one that s checked  radios filter   checked      OR  Another way you can find radio button value  var RadeoButtonStatusCheck      form input type radio  checked   val

User · Answer

Use Below Code     input name your radio button name  checked   val      Please note  value attribute should be defined so could get  Male  or  Female  in your result    lt div id  div container  gt   lt input type  radio  name  Gender  value  Male    gt  Male  lt br   gt   lt input type  radio  name  Gender  value  Female    gt  Female  lt  div gt

User · Answer

To get the value of the selected Radio Button  Use RadioButtonName and the Form Id containing the RadioButton      input name radioName  checked     myForm   val     OR by only      form input type radio  checked   val

User · Answer

HTML Code  lt input id  is verified  class  check  name  is verified  type  radio  value  1   gt   lt input id  is verified  class  check  name  is verified  type  radio  checked  checked  value  0   gt   lt input id  submit  name  submit  type  submit  value  Save    gt   Javascript Code    input type  radio   check   click function         if   this  is   checked              if    this  val      1                    submit   val  Verified  amp  Save             else                  submit   val  Save

User · Answer

For multiple radio buttons  you have to put same name attribute on your radio button tag  For example   lt input type  quot radio quot  name quot gender quot  class  quot select gender quot  value  quot male quot  gt   lt input type  quot radio quot  name quot gender quot  class  quot select gender quot  value  quot female quot  gt   Once you have radio options  now you can do jQuery code like below to get he value of selected checked radio option    document  on  quot change quot    quot  select gender quot   function         console log   this  val           Here you will get the current selected checked radio option value      Note    document  is used because if the radio button are created after DOM 100  loaded  then you need it  because if you don t use   document  then jQuery will not know the scope of newly created radion buttons  It s a good practice to do jQuery event calls like this

[jquery] jQuery get value of selected radio button

Examples related to jquery

Examples related to radio-button

Examples related to siebel