21

I've created a basic 2 radio button form as seen in my example below.

Observing the browser rendering, we see item 1 selected. We inspect item 1 and 2.

When I click item 2, I expect item 1's checked=checked to be remove. I expect item 2 receive the attribute checked=checked.

Is this not the expected behavior? 

<div>
    <span>Item 1</span>
    <input type="radio" name="radio1" id="radio1" checked="checked" />
</div>

<div>
    <span>Item 2</span>
    <input type="radio" name="radio1" class="checkbox" id="radio2" />
</div>

http://jsfiddle.net/chrimbus/ZTE7R/1/

nthChild
  • 669
  • 3
  • 9
  • 19
  • @quentin and others: Your replies are great, does this confirm then that the expected behavior of an _attribute_ "checked" will not automatically update **without the use of Javascript?** – nthChild Jul 25 '13 at 14:48
  • I was able to style the "checked" radio button and label by applying styles using a pseudo selector :checked. This works for IE9+, Chrome and Firefox. http://jsfiddle.net/sXjyL/4/ – nthChild Jul 26 '13 at 01:00
  • A more clear answer as to how to work with radio buttons using jQuery is on SO here: https://stackoverflow.com/questions/596351/how-can-i-know-which-radio-button-is-selected-via-jquery – qxotk Jan 14 '19 at 21:30

1 Answers1

21

The checked attribute specifies the default checked radio button, not the currently checked one.

See this example code. Click the second radio button, then click Reset. Then click the second radio button again, then Switch, then Reset.

The checked property will give the current checked state of a radio button.

Checked attribute vs checked property

Quentin
  • 857,932
  • 118
  • 1,152
  • 1,264
  • 1
    Was waiting for that *property* vs *attribute* distinction :) – brbcoding Jul 24 '13 at 14:12
  • @quentin Your replies are great, does this confirm then that the expected behavior of an attribute "checked" will not automatically update without the use of Javascript? – nthChild Jul 25 '13 at 17:57
  • Yes. Only JavaScript can change the checked *attribute* once the page has loaded. – Quentin Jul 25 '13 at 17:59