Check a radio button with javascript

Question

For some reason  I can t seem to figure this out   I have some radio buttons in my html which toggles categories    lt input type  radio  name  main-categories  id   1234  value  1234    gt     All  lt input type  radio  name  main-categories  id   2345  value  2345    gt     Certain category  lt input type  radio  name  main-categories  id   3456  value  3456    gt     Certain category  lt input type  radio  name  main-categories  id   4567  value  4567    gt     Certain category   The user can select whichever he she wants  but when an certain event triggers  I want to set 1234 to be set checked radio button  because this is the default checked radio button   I have tried versions of this  with and without jQuery    document getElementById    1234   checked   true   But it doesn t seem to update  I need it to visibly update so the user can see it  Can anybody help   EDIT  I m just tired and overlooked the    thanks for pointing it out  that and   prop

User · Answer

By using document getElementById   function you don t have to pass   before element s id   Code   document getElementById   1234   checked   true    Demo  JSFiddle

User · Answer

Easiest way would probably be with jQuery  as follows     document  ready function           1234   attr  checked   checked         This adds a new attribute  checked   which in HTML does not need a value   Just remember to include the jQuery library    lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt

User · Answer

I was able to select  check  a radio input button by using this Javascript code in Firefox 72  within a Web Extension option page to LOAD the value   var reloadItem   browser storage sync get  reload mode    reloadItem then  response    gt        if  response  reload mode       Periodic             document querySelector  input name reload mode  value  Periodic     click          else if  response  reload mode       Page Bottom             document querySelector  input name reload mode  value  Page Bottom     click          else           document querySelector  input name reload mode  value  Both     click                Where the associated code to SAVE the value was   reload mode  document querySelector  input name reload mode  checked   value   Given HTML like the following        lt input type  radio  id  periodic  name  reload mode  value  Periodic  gt       lt label for  periodic  gt Periodic lt  label gt  lt br gt       lt input type  radio  id  bottom  name  reload mode  value  Page Bottom  gt       lt label for  bottom  gt Page Bottom lt  label gt  lt br gt       lt input type  radio  id  both  name  reload mode  value  Both  gt       lt label for  both  gt Both lt  label gt  lt  br gt  lt  br gt

User · Answer

Today  in the year 2016  it is save to use document querySelector without knowing the ID  especially if you have more than 2 radio buttons    document querySelector  input name main-categories  checked   value

User · Answer

If you want to set the  1234  button  you need to use its  id    document getElementById   1234   checked   true    When you re using the browser API   getElementById    you don t use selector syntax  you just pass the actual  id  value you re looking for   You use selector syntax with jQuery or  querySelector   and  querySelectorAll

User · Answer

Do not mix CSS JQuery syntax    for identifier  with native JS   Native JS solution   document getElementById   1234   checked   true   JQuery solution        1234   prop  checked   true

[javascript] Check a radio button with javascript

Examples related to javascript

Examples related to html

Examples related to radio-button