How to check a radio button with jQuery

Question

I try to check a radio button with jQuery  Here s my code    lt form gt       lt div id  type  gt           lt input type  radio  id  radio 1  name  type  value  1    gt           lt input type  radio  id  radio 2  name  type  value  2    gt           lt input type  radio  id  radio 3  name  type  value  3    gt        lt  div gt   lt  form gt    And the JavaScript    jQuery   radio 1   attr  checked   true     Doesn t work   jQuery  input value  1     attr  checked   true     Doesn t work   jQuery  input radio name  type     filter   value  1     attr  checked   true     Doesn t work   Do you have another idea  What am I missing

User · Answer

The   prop way is better     document  ready function                                          radio 1   prop  checked   true                 and you can test it like the following     document  ready function                                          radio 1   radio 2     radio 3   change function              if      radio 1   is   checked                      div1   show                      else if      radio 2   is   checked                      div2   show                      else                  div3   show

User · Answer

Some times above solutions do not work  then you can try below   jQuery uniform update jQuery   yourElementID   attr  checked  true    jQuery uniform update jQuery   yourElementID   attr  checked  false      Another way you can try is   jQuery  input radio name yourElementName  nth 0    attr  checked  true

User · Answer

Surprisingly  the most popular and accepted answer ignores triggering appropriate event despite of the comments  Make sure you invoke  change    otherwise all the  on change  bindings will ignore this event       radio 1   prop  checked   true  change

User · Answer

If property name does not work don t forget that id still exists  This answer is for people who wants to target the id here how you do      input id element id  value element value    prop  checked  true     Because property name does not work for me  Make sure you don t surround id and name with double single quotations   Cheers

User · Answer

For versions of jQuery equal or above      1 6  use       radio 1   prop  checked   true     For versions prior to   lt   1 6  use       radio 1   attr  checked    checked      Tip  You may also want to call click   or change   on the radio button afterwards  See comments for more info

User · Answer

Use prop   mehtod    Source Link    lt p gt       lt h5 gt Radio Selection lt  h5 gt        lt label gt           lt input type  radio  name  myRadio  value  1  gt  Option 1      lt  label gt       lt label gt           lt input type  radio  name  myRadio  value  2  gt  Option 2      lt  label gt       lt label gt           lt input type  radio  name  myRadio  value  3  gt  Option 3      lt  label gt   lt  p gt    lt p gt       lt button gt Check Radio Option 2 lt  button gt   lt  p gt     lt script gt        function                  button   click function                     input radio value  2     prop  checked  true                         lt  script gt

User · Answer

Pure JS is Simpler radio 1 checked   x000D   x000D  checkBtn onclick   e  gt  console log  radio 1 checked    x000D   lt  -- Question html -- gt   lt form gt       lt div id  type  gt           lt input type  radio  id  radio 1  name  type  value  1    gt           lt input type  radio  id  radio 2  name  type  value  2    gt           lt input type  radio  id  radio 3  name  type  value  3    gt        lt  div gt   lt  form gt    lt  -- Test html -- gt   lt button id  checkBtn  gt Check lt  button gt  x000D   x000D   x000D

User · Answer

Yes  it worked for me like a way       radio 1   attr  checked    checked

User · Answer

In case you don t want to include a big library like jQuery for something this simple  here s an alternative solution using built-in DOM methods    x000D   x000D     Check checkbox by id  x000D  document querySelector   radio 1   checked   true  x000D   x000D     Check checkbox by value  x000D  document querySelector   type  gt   value  1     checked   true  x000D   x000D     If this is the only input with a value of 1 on the page  you can leave out the  type  gt  x000D  document querySelector   value  1     checked   true  x000D   lt form gt  x000D       lt div id  type  gt  x000D           lt input type  radio  id  radio 1  name  type  value  1    gt  x000D           lt input type  radio  id  radio 2  name  type  value  2    gt  x000D           lt input type  radio  id  radio 3  name  type  value  3    gt   x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Try this   To check Radio button using Value use this      input name type  value 2    attr  checked   true      Or     input name type  value 2    attr  checked    checked      Or     input name type  value 2    prop  checked    checked      To check Radio button using ID use this       radio 1   attr  checked   checked      Or      radio 1   prop  checked   checked

User · Answer

I used jquery-1 11 3 js  Basic Enable  amp  disable      Tips 1    Radio button type common Disable  amp  Enable       input type radio    attr  disabled   false      input type radio    attr  disabled   true         Tips 2    ID selector Using prop   or attr          paytmradio   prop  checked   true       sbiradio   prop  checked   false    jQuery   paytmradio   attr  checked    checked       or true this won t work jQuery   sbiradio   attr  checked   false        Tips 3    Class selector Using prop   or arrt          paytm   prop  checked   true       sbi   prop  checked   false    jQuery   paytm   attr  checked    checked       or true jQuery   sbi   attr  checked   false        OTHER TIPS       paytmradio   is   checked        Checking is checked or not     radio not  checked    attr  disabled   true      All not check radio button disabled     input name payment type  value 1    attr  checked    checked      input type via checked     input checked     paytmradio   val      get the checked value   index html   lt div class  col-md-6  gt             lt label class  control-label  for  paymenttype  gt Payment Type  lt span style  color red  gt   lt  span gt  lt  label gt       lt div id  paymenttype  class  form-group  style  padding-top  inherit   gt           lt label class  radio-inline  class  form-control  gt  lt input  type  radio  id  paytmradio   class  paytm  name  paymenttype  value  1  onclick  document getElementById  paymentFrm   action  paytmTest php    gt PayTM lt  label gt           lt label class  radio-inline  class  form-control  gt  lt input  type  radio  id  sbiradio  class  sbi  name  paymenttype  value  2  onclick  document getElementById  paymentFrm   action  sbiTest php    gt SBI ePAY lt  label gt       lt  div gt   lt  div gt

User · Answer

I ve just have a similar problem  a simple solution is to just use    click     Any other solution will work if you refresh radio after calling function

User · Answer

input name inputname  radio   click function         if   this  attr  value     yes                 inputclassname   show              if   this  attr  value     no                 inputclassname   hide

User · Answer

Try this    document  ready function           input name  type   radio   change function            if   this  val       1                          do something                   else if   this  val       2                          do something                   else if   this  val       3                          do something

User · Answer

Try this   In this example  I m targeting it with its input name and value     input name background  value  some value     prop  checked  true     Good to know  in case of multi-word value  it will work because of apostrophes  too

User · Answer

This answer is thanks to Paul LeBeau in a comment  I thought I d write it up as a proper answer since there surprisingly wasn t one  The only thing that worked for me  jQuery 1 12 4  Chrome 86  was     quot  js-my-radio-button quot   trigger  quot click quot     This does everything I want     changes which radio button looks selected  both visually and programmatically  and triggers events such as change on the radio button  Just setting the  quot checked quot  attribute as other answers suggest would not change which radio button was selected for me

User · Answer

I got some related example to be enhanced  how about if I want to add a new condition  lets say  if I want colour scheme to be hidden after I click on project Status value except Pavers and Paving Slabs   Example is in here     function              CostAnalysis input type radio    click function              var value     this  val             if  value     Supply  amp  Lay                     ul-suplay   empty                    ul-suplay   append   lt fieldset data-role  controlgroup  gt      http   jsfiddle net m7hg2p94 4

User · Answer

try this         input checked     radioButton   val     if checked returns True if not checked returns False  jQuery v1 10 1

User · Answer

Try this  var isChecked       radio 1   0  checked

User · Answer

We should want to tell it is a radio button So please try with following code      input type  radio   name  userRadionButtonName     prop  checked   true

User · Answer

Try This      input name type    val   1       http   jsfiddle net nwo706xw

User · Answer

function rbcitiSelction e         debugger         trpersonalemail   hide            trcitiemail   show       function rbpersSelction e        var personalEmail     e  val            trpersonalemail   show            trcitiemail   hide         function               citiEmail   prop  checked   true

User · Answer

In addition  you can check if the element is checked or not   if      myCheckbox   attr  checked           do others stuff   else        do others stuff     You can checked for unchecked element       myCheckbox   attr  checked  true    Standards way   You can also uncheck this way       myCheckbox   removeAttr  checked        You can checked for radio button    For versions of jQuery equal or above      1 6  use       radio 1   prop  checked   true     For versions prior to   lt   1 6  use       radio 1   attr  checked    checked

User · Answer

radio 1   attr  checked   true     or     radio 1   attr  checked    checked

User · Answer

Just in case anyone is trying to achieve this while using jQuery UI  you will also need to refresh the UI checkbox object to reflect the updated value       option2   prop  checked   true      Check id option2    input name  radio options     button  refresh       Refresh button set

User · Answer

One more function prop   that is added in jQuery 1 6  that serves the same purpose       radio 1   prop  checked   true

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

Short and easy to read option       radio 1   is   checked     It returns true or false  so you can use it in  if  statement

User · Answer

I use this code  I m sorry for English   x000D   x000D  var  j   jQuery noConflict      j function            add handler      j   radio-1   radio-2   click function                find all checked and cancel checked          j  input radio checked   prop  checked   false               this radio add cheked          j this  prop  checked   true               x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt fieldset class  section  gt     lt legend gt Radio buttons lt  legend gt     lt label gt       lt input type  radio  id  radio-1  checked gt      Option one is this and that amp mdash be sure to include why it s great    lt  label gt     lt br gt     lt label gt       lt input type  radio  id  radio-2  gt      Option two can be something else    lt  label gt   lt  fieldset gt  x000D   x000D   x000D

User · Answer

attr accepts two strings   The correct way is   jQuery   radio 1   attr  checked    true

User · Answer

Try This     document  ready function          Id   prop  checked   true  checkboxradio  refresh

User · Answer

Get value       name  type   checked    attr  value      Set value      this  attr   checked  true   prop   checked  true      Radio Button click add attr checked       name  type     click function          name  type     removeAttr  checked        this  attr   checked  true   prop   checked  true

User · Answer

You have to do   jQuery   radio 1   attr  checked    checked      That s the HTML attribute

[javascript] How to check a radio button with jQuery?

Examples related to javascript

Examples related to jquery

Examples related to radio-button