Radio Buttons Checked Attribute Not Working

Question

The radio button does not show up as checked by default  I started off without a default choice doing some very simple js validation and it wasn t working  So I opted to just use default values until I figured that out and discovered that something weird is going on    The markup is valid and I ve tried in FF  Safari and Chrome  Nothing works    I think it s a conflict with the jQuery library because the problem goes away when I remove the call script    x000D   x000D   lt label gt Do you want to accept American Express  lt  label gt  Yes x000D   lt input id  amex  style  width  20px   type  radio  name  Contact0 AmericanExpress  value  1    gt  No x000D   lt input style  width  20px   type  radio  name  Contact0 AmericanExpress  class  check  value  0  checked  checked    gt  x000D   x000D   x000D

User · Answer

x000D   x000D    Radio button aria-checked  true or false one at a time   x000D   x000D     input radio name anynameofinput    change function     x000D              if  this value      value1     x000D                      id1   attr  aria-checked   true    x000D                      id2   attr  aria-checked   false    x000D                x000D              else if  this value      value2      x000D                      id2   attr  aria-checked   true    x000D                      id1   attr  aria-checked   false    x000D                x000D         x000D   x000D   x000D

User · Answer

Radio inputs must be inside of a form for  checked  to work

User · Answer

You re using non-standard xhtml code  values should be framed with double quotes  not single quotes   Try this    lt form gt     lt label gt Do you want to accept American Express  lt  label gt    Yes lt input id  amex  style  width  20px   type  radio  name  Contact0 AmericanExpress     gt      No lt input style  width  20px   type  radio  name  Contact0 AmericanExpress  class  check  checked  checked    gt   lt  form gt

User · Answer

This might be it   Is there a bug with radio buttons in jQuery 1 9 1   In short  Don t use attr   but prop   for checking radio buttons  God I hate JS

User · Answer

The jQuery documentation provides a detailed explanation for checked property vs attribute   Accordingly  here is another way to retrieve selected radio button value  var accepted      input name  Contact0 AmericanExpress   checked   val

User · Answer

If you have multiple of the same name with the checked attribute it will take the last checked radio on the page    x000D   x000D   lt form gt  x000D       lt label gt Do you want to accept American Express  lt  label gt  x000D      Yes lt input id  amex  style  width  20px   type  radio  name  Contact0 AmericanExpress     gt    x000D      maybe lt input id  amex  style  width  20px   type  radio  name  Contact0 AmericanExpress   checked  checked    gt    x000D      No lt input style  width  20px   type  radio  name  Contact0 AmericanExpress  class  check  checked  checked    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Replace checked  checked  with checked  true   Or you could even shorten it to just checked   This is because the expected value type of the checked prop is a boolean  not a string

User · Answer

also try this way      input radio name  name   id  abcd  no       attr  checked    checked      if there is  lt form   gt  tag then   checked   true  otherwise   checked    checked

User · Answer

I could repro this by setting the name of input tag the same for two groups of input like below    lt body gt     lt div gt         lt div gt           lt h3 gt Header1 lt  h3 gt         lt  div gt         lt div gt             lt input type  radio  name  gender  id  male 1  value  male  gt  Male lt br gt             lt input type  radio  name  gender  id  female 1  value  female  checked  checked  gt  Female lt br gt             lt input type  submit  value  Submit  gt         lt  div gt     lt  div gt       lt div gt         lt div gt           lt h3 gt Header2 lt  h3 gt         lt  div gt         lt div gt             lt input type  radio  name  gender  id  male 2  value  male  gt  Male lt br gt             lt input type  radio  name  gender  id  female 2  value  female  checked  checked  gt  Female lt br gt             lt input type  submit  value  Submit  gt         lt  div gt     lt  div gt   lt  body gt     To see this running  click here   The following two solutions both fix the problem    Use different names for the inputs in the second group Use form tag instead of div tag for one of the groups  can t really figure out the real reason why this would solve the problem  Would love to hear some opinions on this

User · Answer

hi I think if you put id attribute for the second input and give it a unique id value it will work   lt label gt Do you want to accept American Express  lt  label gt  Yes lt input id  amex  style  width  20px   type  radio  name  Contact0 AmericanExpress    value  1   gt    No lt input style  width  20px   id  amex0  type  radio  name  Contact0 AmericanExpress  class  check  value  0  checked  checked   gt

User · Answer

Just copied your code into  http   jsfiddle net fY4F9   No is checked by default  Do you have any javascript running that would effect the radio box

User · Answer

Your code is right  try to debug your JQuery script to find the issue  If you re using FF you can install an extension to debug JS  and JQuery  it s called FireBug

User · Answer

The ultimate JavaScript workaround to this annoying issue -   Simply wrap the jQuery command in a setTimeout   The interval can be extremely small  I use 10 milliseconds and it seems to be working great   The delay is so small that it is virtually undetectable to the end users   setTimeout function          radio-element   attr  checked   checked      10     This will also work with        radio-element   trigger  click        radio-element   attr  checked  true       radio-element   attr  checked  ANYTHING THAT IS NOT FALSE     Hacky   hacky   hacky   hacky    Yes I know    hence this is a workaround

User · Answer

Hey I was also facing similar problem  in an ajax generated page   I took generated source using Webdeveloper pluggin in FF  and checked all the inputs in the form and found out that there was another checkbox inside a hidden div display none  with same ID  Once I changed the id of second checkbox  it started working   You can also try that   and let me know the result   cheers

User · Answer

just add checked attribute to each radio that you want to have default checked  try this     lt input style  width  20px   type  radio  name  Contact0 AmericanExpress  class  check  checked  gt

[html] Radio Buttons "Checked" Attribute Not Working

Examples related to html

Examples related to forms

Examples related to radio-button